bootstrap Table表格宽度不生效的现象和处理方法

现象如下图所示，html代码中通过内联样式修改了th的宽度，但是表格table预览时列宽明显太窄，导致文字显示异常。

bootstrap Table表格宽度不生效的现象和处理方法

代码如下图所示，列宽设置的200px，但实际显示只有不到40px.

1. <thead>
   
2.                                                         <tr>
   
3.                                                                 <th style="width:200px;">平台</th>
   
4.                                                                 <th>标题</th>
   
5.                                                                 <th>返现链接(复制打开该链接下单)</th>
   
6.                                                                 <th>返现金额</th>
   
7.                                                                 <th>备注</th>
   
8.                                                         </tr>
   
9.                                                 </thead>

复制代码

在 Bootstrap 或者一些特殊情况下，会出现设置宽度不生效的现象。

首先，表格的展示属性应为 display: table 如果是 block 会出现宽度不生效的情况。

第二为table添加table-layout:fixed属性，小编遇到的问题就是添加这个属性解决的。


table-layout 设置表格布局算法，有如下三个属性：

automatic 默认，列宽度由单元格内容设定。

fixed 列宽由表格宽度和列宽度设定。

inherit 规定应该从父元素继承 table-layout 属性的值。

也可以及一行 word-wrap: break-word; 效果会更好。


以上，就是使用bootstrap时表格列宽失效的解决方法

点击阅读更多内容！