CSS - table超出父级div

用到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;
}

参考：

• div中table的宽度超过div的宽度问题
• table 如何不越过父级div