table中的td内容超出隐藏

最新推荐文章于 2023-02-16 23:56:48 发布

原创最新推荐文章于 2023-02-16 23:56:48 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种精简表格样式的技巧，通过设置table-layout:fixed及width属性，结合td标签上的white-space:nowrap等属性，实现超出部分的优雅隐藏，保持页面整洁。

<table style="table-layout: fixed;width: XXX px">
    <tr>
          <td style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;" ></td>
    </tr>
</table>
         
table标签需要设定属性 table-layout: fixed;width:XXXpx;

在要超出隐藏的td标签上设定属性  white-space: nowrap;text-overflow: ellipsis;overflow: hidden; 

不要忘了给table加个宽度