使用Bootstrap固定表格行宽度

Question

我在我的网站上使用bootstrap(链接),但我对表的使用有点困惑.在bootraps之前,我的所有表格TD单元格都有动态宽度,因此如果内容是长句子,TD的宽度会更大,如果只有11个字符长的文本输入则TD会更小.但是现在我所有的TD元素都有相同的宽度,我找不到方法,如何改变这个......

这是我的表:

<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>

所以我希望"数据标题X"单元格的宽度更大,因为输入文本字段更小的单元格.如果我手动给他们style ="width:xyzpx;" 属性它没有改变任何东西.

能以某种方式完成吗？

Answer 1

尝试在表元素上使用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>

这是jsFiddle

ps:bootstrap3中有col-(col-4,col-lg-4 ...)类前缀