table元素超出父级div的问题及解决方案

用到div包裹table的布局，想要的效果是table的宽度等于div宽度。听起来很简单啊，设置table宽度为100%，省略号三行代码往上一粘，心想着大功告成。

but！！！！页面效果发现其中一行数据较长，导致table其实是超出了父级div。

原因

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

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

所以改成不受内容影响的就好咯。

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