CSS - table超出父级div

救护用的垃圾车

于 2019-12-06 15:02:02 发布

阅读量8.5k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css table

本文链接：https://blog.youkuaiyun.com/DeepHugY/article/details/103423037

5 篇文章

订阅专栏

本文探讨了div包裹table布局中，table宽度超出div宽度的问题。通过深入理解table-layout属性，解释了为何设置width:100%无效，并提供了解决方案，即使用fixed值确保table宽度受div限制，同时实现内容省略号显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用到div包裹table的布局，想要的效果是table的宽度等于div宽度，超出内容省略号显示。
听起来很简单啊，设置table宽度为100%，省略号三行代码往上一粘，心想着大功告成。
but！！！！页面效果发现其中一行数据较长，导致table其实是超出了父级div。

查资料后发现原来table有不一样的默认样式table-layout，它的值是这样的：

值	描述
automatic	默认。列宽度由单元格内容设定
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

所以可以知道其实手动给table设置的width: 100%是没用的，table的值是受到了列宽的影响，而列宽又因内容决定，所以就是table的宽度受到内容影响了。

so，改成不受内容影响的就好咯。

table {
      table-layout: fixed;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

参考：