twitter-bootstrap Bootstrap 3 表，使用滚动条以 px 为单位设置固定列宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19992799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 table, set fixed column width in px with scrollbar
提问by wencha
I need a table with fixed column widths in px on my Bootstrap 3 project. Every <th>in my table <table id="items" class="table table-striped table-condensed">has style=##pxbut its not assigning it. I've tried adding style="width:auto; overflow: scroll;"to the table but it does't work. Also tried removig every class on my table but colums wont grow.
在我的 Bootstrap 3 项目中，我需要一个以 px 为单位的固定列宽的表格。<th>我表中的每个<table id="items" class="table table-striped table-condensed">都有，style=##px但没有分配它。我试过添加style="width:auto; overflow: scroll;"到表中，但它不起作用。还尝试删除我桌子上的每个班级，但列不会增长。
Please help!
请帮忙！
采纳答案by wencha
The solution finally was to remove 'table' class from the <table>. That way you can specify de width on <th>by css or directly on its width attribute. With the table class the width of the column can't be set even specifying a <colgroup>like a suggested answer.
最终的解决方案是从<table>. 这样你就可以<th>通过 css 或直接在它的 width 属性上指定宽度。对于表格类，即使指定<colgroup>类似建议的答案，也无法设置列的宽度。
回答by Kevin Aenmey
You could specify a <colgroup>section:
您可以指定一个<colgroup>部分：
<table>
<colgroup>
<col span="1">
<col span="1">
</colgroup>
...
</table>
... and then set the width of your columns in CSS:
...然后在 CSS 中设置列的宽度：
col {
width:200px;
}
If you are using the bootstrap .tableclass on the table element, you will also need to set the width of your table to auto.
如果您.table在 table 元素上使用 bootstrap类，您还需要将 table 的宽度设置为auto.
See this jsfiddle.
看到这个jsfiddle。
回答by bzuillsmith
Bootstrap 3 applies a width: 100%to the <table class="table">. In order to honor this, the browser will stretch cells to fill the remaining space. In Chrome 35 (I haven't tested in anything else), rules seem to be:
引导3施加width: 100%的<table class="table">。为了兑现这一点，浏览器将拉伸单元格以填充剩余空间。在 Chrome 35 中（我还没有测试过其他任何东西），规则似乎是：
If some columns are fixed, but not all, then the fixed column widths are honored, and the remaining width of the table is split between the remaining columns that have no specified width.
If all
<col>or<colgroups>have a specified (fixed) width, the browser will attemptto treat the widths like a percentage proportional to the width of the table. So if a two col's in a table have 100px, and 200px widths respectively, they mayget 33% and 66% of the width respectively. This is not always the case the case though. The rules for this behavior seem to be quite complex and are probably browser-specific.
如果某些列是固定的，但不是全部，则采用固定的列宽，并且表格的剩余宽度在没有指定宽度的剩余列之间拆分。
如果全部
<col>或<colgroups>具有指定的（固定）宽度，浏览器将尝试将宽度视为与表格宽度成比例的百分比。因此，如果表格中的两个列分别具有 100 像素和 200 像素的宽度，则它们可能分别获得宽度的33% 和 66%。但情况并非总是如此。这种行为的规则似乎非常复杂，并且可能是特定于浏览器的。
See this fiddle for a few examples and some experimentation.
有关一些示例和一些实验，请参阅此小提琴。
