Html table td里使用overflow:hidden无效解决方法

最新推荐文章于 2023-09-11 17:54:45 发布

脏兮兮的爸爸

最新推荐文章于 2023-09-11 17:54:45 发布

阅读量1.4w

点赞数 3

分类专栏：高质量代码编写 HTML(5)

本文链接：https://blog.csdn.net/ajoashop/article/details/45312559

版权

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

在表格里经常用到溢出隐藏，溢出省略，发现直接在td标签里使用overflow:hidden有时无效。

如果遇到这种情况，尝试两种方式可以解决：

table td使用overflow:hidden无效解决方法：

解决方法一： 在table里使用table-layout:fixed;

    <table style="table-layout:fixed">       
       <td  style="overflow:hidden">
       </td>    
    </table>

table-layout:fixed是什么鬼？？百度翻译结果：表格布局：固定；

这是一个固定布局的算法，表格的宽度不是根据表格里的内容改变而改变的，display:inline-block,width规定了表格列的宽度。

PS: 溢出省略号css代码>overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 然后固定容器宽度就可以啦。

text-overflow:ellipsis 属性的兼容性很好，尤其不用担心IE兼容问题（ie6+都可以),但火狐浏览器需要7.0+，加个-o-欧朋浏览器前缀就OK了，对于火狐低版本浏览器，需要用js截取方法（还有更好办法？）

解决方法二：在table的td中使用div 把内容放进去，固定宽度，做溢出处理。

关注