table表格的宽度设置,及Bootstrap表格宽度不生效的解决方法

001.png table表格的宽度设置,及Bootstrap表格宽度不生效的解决方法 经验总结

我们一般设置表格的宽度是用如下方法:可以使固定尺寸,也可以是百分比

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表格宽度不生效的解决方法

赞 (5)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)