我们一般设置表格的宽度是用如下方法:可以使固定尺寸,也可以是百分比
th,td{ width: 20%; text-align: center; }
设置 table 宽度 100% :
table{ width: 100%; }
但是在 Bootstrap 或者一些特殊情况下,会出现设置宽度不生效的现象。
1.首先应该检查 table 的属性:
table{ display: table; }
应为 display: table 如果是 block 会出现宽度不生效的情况。
2.添加属性:
table{ table-layout:fixed; }
table-layout 设置表格布局算法,有如下三个属性:
automatic 默认,列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。
也可以及一行 word-wrap: break-word; 效果会更好。
未经允许不得转载:w3h5 » table表格的宽度设置,及Bootstrap表格宽度不生效的解决方法
原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/231265.html