4

我在我的网站上使用引导程序（链接），但我对表格的使用有点困惑。在 bootraps 之前，我所有的表格 TD 单元格都有动态宽度，所以如果内容是一个长句子，则 TD 具有更大的宽度，如果它只有 11 个字符长的文本输入，则它的宽度更小。但是现在我所有的 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;" 属性它没有改变任何东西。

可以以某种方式完成吗？

4

2 回答 2

6

尝试在表格元素（或任何需要的地方，例如输入）上使用 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...)类前缀

于 2013-08-05T13:11:32.987 回答
1

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

此外，您可能希望使您的表格如下所示以获得更有效的标记：

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

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

于 2012-11-14T14:59:39.603 回答