让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>&nbsp;</td>

<td>&nbsp;</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>&nbsp;</td>

<td>&nbsp;</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

相关推荐