4

サイトでブートストラップ (リンク) を使用していますが、テーブルの使用について少し混乱しています。ブートトラップの前は、すべてのテーブル 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;" を指定すると 属性は何も変更しませんでした。

どうにかできますか？

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:ブートストラップ 3 に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 に答える