twitter-bootstrap 使用 Bootstrap 固定表格行宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13381255/
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
Fixed table row width with Bootstrap
提问by VORiAND
I'm using bootstrap (link) on my site, but i'm a little bit confused about the using of tables. Before bootraps all my table TD cells had dynamic widths, so the TD had a bigger width if the content was a long sentence and smaller if it was only a 11 character long text input. But right now all my TD elements has the same width and I can't find the way, how to change this...
我在我的网站上使用引导程序（链接），但我对表格的使用有点困惑。在引导之前，我的所有表格 TD 单元格都有动态宽度，所以如果内容是一个长句子，TD 的宽度会更大，如果它只有 11 个字符长的文本输入，则 TD 的宽度会更小。但是现在我所有的 TD 元素都具有相同的宽度，我找不到方法，如何更改它...
This is my table:
这是我的表：
<table id="table1" style="padding-top:10px;">
<tr>
<td colspan="6" style="text-align:center;">TITLE</td>
</tr>
<tr>
<td colspan="3" style="text-align:center;">SUBTITLE 1</td>
<td colspan="3" style="text-align:center;">SUBTITLE 2</td>
</tr>
<tr>
<td style="text-align:left;"><b>A.</b></td>
<td>Data title 1</td>
<td><input type="text" maxlength="11" size="11" name="input_a"></td>
<td style="text-align:left;"><b>D.</b></td>
<td>Data title 2</td>
<td><input type="text" maxlength="11" size="11" name="input_b"></td>
</tr>
...
</table>
So I want to have the "Data title X" cell have bigger width as the cell which has the input text field smaller. If I give them manually the style="width:xyzpx;" attribute it didn't change anything.
所以我想让“数据标题X”单元格的宽度更大，因为输入文本字段的单元格更小。如果我手动给他们 style="width:xyzpx;" 属性它没有改变任何东西。
Can it be done somehow?
可以以某种方式完成吗？
回答by samuel
try to use the the span1, span2... span12 classes on table elements (or whereever needed, e.g. inputs):
尝试在表格元素（或任何需要的地方，例如输入）上使用 span1、span2...span12 类：
<table id="table1">
<thead>
<tr>
<th colspan="6">TITLE</th>
</tr>
<tr>
<th colspan="3">SUBTITLE 1</th>
<th colspan="3">SUBTITLE 2</th>
</tr>
</thead>
<tr>
<td class='span1'><b>A.</b>
</td>
<td class='span4'>Data title 1</td>
<td class='span1'>
<input type="text" maxlength="11" size="11" name="input_a" class="span1" />
</td>
<td class='span1'><b>D.</b>
</td>
<td class='span4'>Data title 2</td>
<td class='span1'>
<input type="text" maxlength="11" size="11" name="input_b" class="span1" />
</td>
</tr>
</table>
here is the jsFiddle
这是jsFiddle
ps: there is col-(col-4, col-lg-4...) class prefix in bootstrap3
ps：bootstrap3 中有col-(col-4, col-lg-4...) 类前缀
回答by svenbravo7
Using <td width="10%">works for me on Twitter bootstrap. Or you could add a class to the td and set the width in your stylesheet td.column{ width: 10% !important;}
<td width="10%">在 Twitter 引导程序上使用对我有用。或者您可以向 td 添加一个类并在样式表中设置宽度td.column{ width: 10% !important;}
Also you might want to make your tables like below for a more valid markup:
此外，您可能希望制作如下表格以获得更有效的标记：
<table>
<thead>
<tr>
<td>Title 1</td>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
</tbody>
</table>
Add the width properties to the <tr>with all 6 <td>elements.
将宽度属性添加到<tr>所有 6 个<td>元素。
