1

在我的 Bootstrap 3 项目中，我需要一个以 px 为单位的固定列宽的表格。<th>我表中的每一个<table id="items" class="table table-striped table-condensed">都有style=##px但它没有分配它。我试过添加style="width:auto; overflow: scroll;"到表中，但它不起作用。还尝试删除我桌子上的每个班级，但列不会增长。

请帮忙！

4

3 回答 3

9

您可以指定一个<colgroup>部分：

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

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

col {
    width:200px;
}

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

看到这个jsfiddle。

于 2013-11-15T03:21:44.577 回答
2

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

  1. 如果某些列是固定的，但不是全部，则采用固定的列宽，并且表格的剩余宽度在没有指定宽度的剩余列之间拆分。

  2. 如果 all<col>或<colgroups>具有指定的（固定）宽度，浏览器将尝试将宽度视为与表格宽度成比例的百分比。因此，如果表格中的两个列分别具有 100 像素和 200 像素的宽度，它们可能分别获得 33% 和 66% 的宽度。但情况并非总是如此。这种行为的规则似乎相当复杂，并且可能是特定于浏览器的。

有关一些示例和一些实验，请参见this fiddle。

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

于 2014-05-30T18:25:41.357 回答
-3

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

于 2013-11-16T21:12:51.003 回答