Question

我的Bootstrap 3项目需要一个在px中具有固定列宽的表。我的表<th>中的每个<table id="items" class="table table-striped table-condensed">都有style=##px，但它没有分配它。我已经尝试将style="width:auto; overflow: scroll;"添加到表中，但它不起作用。还试着去掉我桌子上的每一堂课，但是柱子不会长大。

请帮忙！

Answer 1

您可以指定<colgroup>部分：

<table>
    <colgroup>
        <col span="1">
        <col span="1">
    </colgroup>
    ...
</table>

...然后在CSS中设置列的宽度：

col {
    width:200px;
}

如果您在table元素上使用bootstrap .table类，则还需要将表的宽度设置为auto。

请参阅此jsfiddle。

Answer 2

Bootstrap 3将width: 100%应用于<table class="table">。为了兑现这一点，浏览器将拉伸单元格以填充剩余空间。在Chrome 35中（我还没有在其他任何方面进行过测试），规则似乎是：

如果某些列是固定的，但不是全部，则固定列宽度将被保留，表格的剩余宽度将在没有指定宽度的其余列之间分割。
如果所有<col>或<colgroups>都有指定的（固定）宽度，浏览器将尝试将宽度视为与宽度成比例的百分比桌子。因此，如果表格中的两个字母分别具有100px和200px宽度，则可能分别获得宽度的33％和66％。但情况并非总是这样。这种行为的规则似乎非常复杂，可能是浏览器特定的。

通过一些例子和一些实验来看这个小提琴。

http://jsfiddle.net/bzuillsmith/Nuhxj/129/

Answer 3

解决方案最终是从<table>删除'table'类。这样，您可以通过css或直接在其width属性上指定<th>上的de width。使用表类，即使像建议的答案一样指定<colgroup>，也无法设置列的宽度。

Bootstrap 3表，使用滚动条在px中设置固定列宽

3 个答案: