网页制作 TD也可以溢出隐藏显示

2020-04-17 08:38:37易采站长站整理

<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,那么我们在固定宽度的单元格内再加一个标记元素呢?

最佳方案:


提示:您可以先修改部分代码再运行
  运行上面的代码,会发现这样的做法是可以的,而且从代码的简洁性、可读性和合理性几方面来说,都较前几种方案为好。

  {还没有做过给单元格隐藏超过固定宽度内容的同学,可先在机器上玩玩,然后再来看本文}