网页制作教程:td也可以溢出隐藏显示【转】
原文发布时间为：2010-02-05 —— 来源于本人的百度文章 [由搬家工具导入]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>TD也玩overflow:hidden</title>
<style type="text/css">
table {width:500px;table-layout:fixed;}
tr span,tr td {white-space:nowrap;overflow:hidden;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="测试">
<thead>
<tr>
<td class="col1"><span>产品名称</span></td>
<td class="col2"><span>产品介绍</span></td>
<td class="col3"><span>产品备注</span></td>
</tr>
</thead>
<tbody>
<tr>
<td>神舟 优雅Q400N</td>
<td>优雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td>迅驰4平台，突出的性价比，漂亮的外观</td>
</tr>
</tbody>
</table>
</body>
</html>
网页制作Webjx文章简介：回头来看看Table：TD也玩overflow:hidden.
或许我这篇文章一取这样的名字，就会有人要问了：你怎么还在关注table啊，那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了，不知道还有什么好了。
table真的过时了么？你真的了解table么？你真的会用table么？
打口水仗不是我们要做的，留给那些时间很充裕的人吧。
言归正传：
不记得是什么时候，有人在用table模拟DataGrid的时候说，为什么td超出设置为固定宽度的文字不能隐藏，而是会直接换行呢？
是的，事实确实如此，如：
<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
td {white-space:nowrap;overflow:hidden;}
</style>
<table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1">神舟 优雅Q400N</td>
<td class="col2">优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td class="col3">迅驰4平台，突出的性价比，漂亮的外观</td>
</tr>
</table>
运行如上代码，你会发现单元格里超过固定宽度的文字不会被隐藏掉，而是换行显示了，显然，这并不是我的本意。
看起来，这似乎是table的一个特性，它不能很好的支持{width:*px;white-space:nowrap;overflow:hidden;}的组合，说到底就是white-space:nowrap这个东东没起作用，所以看起来overflow:hidden就失效了。{注：如果是一连串的无意义字符则可生效，例如：<td class="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>，这个时候就不需要{white-space:nowrap}来强制它在一行内显示，因为这一连串的a会被认定为是一个字而不发生换行，从而超出.col1宽度的a会被隐藏}
［解决方案一：］
后来有人提到使用百分比宽度就可以了，经测试，确实可以，稍微将第一段的其中几行样式修改一下，其它的不变：
.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}
将修改后的代码运行后，会发现，超出宽度的文字果然被隐藏了，想要的效果似乎得到了。
事实上使用百分比宽度确实可以解决这个文字隐藏的问题，但这似乎并不是想要的最佳的解决方案，因为有的时候我们需要的是一个固定的宽度，而不是百分比宽度。
而这一切的根源就在于如何使得单元格内的文字不换行在一行内显示。
［解决方案二：］
要达到这个要求，除了使用样式，我们也许还会想到一个许久不用了的标签<nobr>，这个元素的作用就是强制内容在一行显示。以上代码做如下修改，其它则不变：
<table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1"><nobr>神舟 优雅Q400N</nobr></td>
<td class="col2"><nobr>优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</nobr></td>
<td class="col3"><nobr>迅驰4平台，突出的性价比，漂亮的外观</nobr></td>
</tr>
</table>
做了这个修改，会发现，效果确实达到，是不是该兴奋呢？不，这似乎还不是最佳的解决方案，因为毕竟使用了一个许久不用且不推荐使用的元素标记，这多少让人觉得有点不爽。
沿着这个思路，我换了一个角度来考虑这个问题，发现问题迎刃而解。
既然在固定宽度的单元格内无法只简单的给th,td加上white-space:nowrap，那么我们在固定宽度的单元格内再加一个标记元素呢？
最佳方案：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>回头来看看Table：TD也玩overflow:hidden</title>
<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
th strong {display:block;width:100%;}
tr strong,tr td {white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="测试">
<thead>
<tr>
<th class="col1"><strong>产品名称</strong></th>
<th class="col2"><strong>产品介绍</strong></th>
<th class="col3"><strong>产品备注</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>神舟 优雅Q400N</td>
<td>优雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td>迅驰4平台，突出的性价比，漂亮的外观</td>
</tr>
</tbody>
</table>
</body>
</html>
运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。
{还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文}
其实table是一个有趣，可玩性很高东东。我们不应该带着有色眼睛去看它，因为它有它存在的道理。
之后会继续写一些关于table的文章，也作自娱之用。http://www.webjx.com/html-xhtml/webxhtml-18700.html
网页制作教程:td也可以溢出隐藏显示【转】的更多相关文章
- td也可以溢出隐藏显示
或许我这篇文章一取这样的名字,就会有人要问了:你怎么还在关注table啊,那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了,不知道还有什么好了. table真的过时了么?你真的了解 ...
- Dreamweaver CS5网页制作教程
说到Dreamweaver这个网页制作神器,不由得想起在学校里上的选修课,那是的我们只知道 table 布局,只知道构建网站最方便的是使用“所见即所得”编辑器.回忆一下,真的是很怀旧啊! 虽说咱现在大 ...
- HTML5网页制作教程:HTML5块级链接
网页制作Webjx文章简介:Web 标准中处处充满了打脸行为,这条规则现在已经失效了!在那篇文章发布一个月后,HTML5doctor 发表了 “Block-level” links in HTML5, ...
- （有趣）chrome不同浏览器版本对display:flex和溢出隐藏显示省略符号的bug
项目中碰到一个十分有趣的情形: 布局要求是这样:右边创建新订单是固定宽度80px,左侧是自适应宽度,溢出隐藏.如下图. 这里布局不用说肯定使用display:flex的.左侧flex:1;右侧widt ...
- 多行溢出隐藏显示省略号功能的JS实现
在页面重构中,经常需要将过多的内容隐藏而显示部分.在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式. 用CSS实现多行溢出隐藏的代码非常简单,但是兼容性也相对较低. displ ...
- text-overflow文本溢出隐藏“...”显示
一.文本溢出省略号显示 1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示) 定义此属性有四个必要条件:1)须有容器 ...
- css文本溢出隐藏显示省略号（单行+多行）
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
- 手机网页制作教程META标签你知道多少？【转+加】
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...
- CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图
规避脱标 定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...
随机推荐
- Python_装饰器、迭代器、生成器
一.装饰器 装饰器的存在是为了实现开放封闭原则: 封闭: 已实现的功能代码块不应该被修改: 开放: 对现有功能的扩展开放. 理解装饰器的三要素: 函数的作用域 高阶函数 闭包 1. 闭包 闭包定义:如 ...
- 5458. 【NOIP2017提高A组冲刺11.7】质数
5458. [NOIP2017提高A组冲刺11.7]质数 (File IO): input:prime.in output:prime.out Time Limits: 1000 ms Memory ...
- 662. Maximum Width of Binary Tree
https://leetcode.com/problems/maximum-width-of-binary-tree/description/ /** * Definition for a binar ...
- libevent源码分析1 ----evnet相关结构体分析
位于代码event-internal.h中. event_base类似事件的集合,你创建一个事件,必须将该事件指定一个集合. struct event_base { 50 const stru ...
- POJ3320 尺取法的正确使用法
一.前言及题意: 最近一直在找题训练,想要更加系统的补补思维,补补漏洞什么的,以避免被个类似于脑筋急转弯的题目干倒,于是在四处找书,找了红书.蓝书,似乎都有些不尽如人意.这两天看到了日本人的白书,重新 ...
- JMX浅谈
一 JMX 是什么? JMX(Java Management Extensions,即Java管理扩展) JMX在Java编程语言中定义了应用程序以及网络管理和监控的体系结构.设计模式.应用程序接口以 ...
- JVM——Java类加载机制总结
)解析:解析阶段是把虚拟机中常量池的符号引用替换为直接引用的过程. 2.3 初始化 类初始化时类加载的最后一步,前面除了加载阶段用户可以通过自定义类加载器参与以外,其余都是虚拟机主导和控制.到了初始化 ...
- 商品评分效果JavaScript
<script> window.onload=function(){ //----------选中的星星会多出一个属性:isClick="true" 藉此来获取评分-- ...
- 【MySQL】资源列表
1.使用yum方式安装MySQL https://blog.csdn.net/zl570932980/article/details/78934601 2.安装Xtrabackup备份工具 https ...
- 【Python】函数参数类型及用法
一.函数的参数类型 def hs(a1,a2,a3,...): ****statements 其中a1,a2,a3是函数的参数,函数的参数类型可分为:必须参数.默认参数.可变参数(不定长参数).关键 ...