首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

让TD支持完善支持overflow:hidden的CSS实现(转)

2014-03-30 
让TD支持完美支持overflow:hidden的CSS实现(转)让TD支持完美支持overflow:hidden的CSS实现(转)直接在TD上

让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:1px solid blue;border-collapse:collapse; width:304px;table-layout:fixed;}
td{border:1px solid blue; 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又换行了
……
<td style="width:80px">一二三四五六七八九</td>
<td>一二三四五六七八九</td>
<td>一二三四五六七八九</td>
……
再次埋头实验-失败-实验…… 答案揭晓 white-space:pre,已通过IE6、7、8B1、FF23、Opera9
<style>
table{border:1px solid blue;border-collapse:collapse; width:304px;table-layout:fixed}
td{border:1px solid blue; height:25px;white-space:pre;overflow:hidden}
.w80{ width:80px}
</style>
<table>
<tr>
   <td class="w80">一二三四五六七八九</td>
   <td>一二三四五六七八九</td>
   <td>一二三四五六七八九</td>
</tr>
<tr>
   <td>by:<a href=">
   <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  

热点排行