网页制造教程:TD也可以溢出隐藏显示
日期：2014-01-02 浏览次数：20850 次
或许我这篇文章一取这样的名字，就会有人要问了：你怎样还在关注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>
