table 超出 父元素 div

table 超出 父元素 div

---

实际是把表格写在了 redio 里面

问题： table 在 div 里面，想要的效果是如果 table 的内容超出了父元素就显示省略号，再把 table 的宽度设置为100%，但是，最后数据比较长还是超出了父元素

原因： table 是有不一样的默认样式 table-layout

值	描述
auto	默认，列宽由单元格设定
fixed	列宽由表格宽度或列宽自己设定
inherit	继承，从父元素继承table-layout的值

解决方案： 把 table-layout 的值设为有表格宽度固定

    table {
      table-layout: fixed;
      //省略号显示超出的内容
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

最后得到的结果： text-overflow: ellipsis 并没有生效

[外链图片转存失败,源站可能有防盗链机制,建议将图