Question

我在我的网站上使用bootstrap（link），但我对使用表格有点困惑。在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 ...）类前缀

Answer 2

在Twitter引导程序中使用<td width="10%">对我有用。或者您可以在td中添加一个类，并在样式表td.column{ width: 10% !important;}

中设置宽度

另外，您可能希望使用下面的表格获得更有效的标记：

<table>
<thead>
<tr>
<td>Title 1</td>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
</tbody>
</table>

使用所有6个<tr>元素将宽度属性添加到<td>。

使用Bootstrap固定表格行宽度

2 个答案: