让TD支持完美支持overflow:hidden的CSS实现(转)
让TD支持完美支持overflow:hidden的CSS实现(转)
直接在TD上使用OVERFLOW：HIDDEN是无效的，百度之，多半的结论是使用DIV插入TD再使用OVERFLOW
显然这不是追求精简的我们所要的，即便不考虑在大量的TD时的工作量
有人提议为其table定义宽度，并使用table-layout:fixed，结合white-space:nowrap实现了
<style>
table{border:1pxsolidblue;border-collapse:collapse;width:304px;table-layout:fixed;}
td{border:1pxsolidblue;height:25px;overflow:hidden;white-space:nowrap;}
</style>
<table>
<tr>
<td>一二三四五六七八九</td>
<td>一二三四五六七八九</td>
<td>一二三四五六七八九</td>
</tr>
<tr>
<td>by:cike.org</td>
<td> </td>
<td> </td>
</tr>
</table>
问题又来了，现实中我们用表格列宽常是不等的，如第一列为80px，再看TD又换行了
……
<tdstyle="width:80px">一二三四五六七八九</td>
<td>一二三四五六七八九</td>
<td>一二三四五六七八九</td>
……
再次埋头实验－失败－实验……答案揭晓white-space:pre，已通过IE6、7、8B1、FF23、Opera9
<style>
table{border:1pxsolidblue;border-collapse:collapse;width:304px;table-layout:fixed}
td{border:1pxsolidblue;height:25px;white-space:pre;overflow:hidden}
.w80{width:80px}
</style>
<table>
<tr>
<tdclass="w80">一二三四五六七八九</td>
<td>一二三四五六七八九</td>
<td>一二三四五六七八九</td>
</tr>
<tr>
<td>by:<ahref=">
<td> </td>
<td> </td>
</tr>
</table>
总结：当td无宽度值时，table{width*;table-layout:fixed;}+td{white-space:nowrap/pre}td将展现为等宽；当TD有指定值时white-space只能为pre，为了省力，推荐在两种情况下都使用white-space:pre
疑惑：为什么指定宽度会使nowrap无效，知道的请分享
原文地址:http://blog.cike.org/2008b/246.shtml