6

2 列のテーブルで列の幅をグローバルに変更するために必要なセレクターを特定するのを手伝ってくれる人はいますか?

これを使用すると、もちろんすべてのセルが選択されます。

table td {
    width: 50px;
}

私が欲しいのはこれです：

<table>
    <tr>
        <td style="width: 50px">data in first column</td>
        <td style="width: 180px">data in second column</td>
    </tr>
    <tr>
        <td style="width: 50px">more data in first column</td>
        <td style="width: 180px">more data in second column</td>
    </tr>
</table>

タグごとに暗黙的に幅を入力するのではなく、幅の指定をスタイル シートに入れたいと思います。50px 幅と 180px を適切に設定できる CSS セレクターはどれですか?

4

3 に答える 3

3

classマークアップで名前を使用し、 colgroup. でのみ幅を定義し、colgroupクロスブラウザー互換であるため、これははるかに手間がかかりません。

例えば。

<table>
    <colgroup>
        <col class="colOne" />
        <col class="colTwo" />
    </colgroup>
    <tr>
        <td>data in first column</td>
        <td>data in second column</td>
    </tr>
    <tr>
        <td>more data in first column</td>
        <td>more data in second column</td>
    </tr>
</table>

/* CSS */

.colOne{
    width: 50px;
}
.colTwo{
    width: 180px;
}

フィドルを参照してください: http://jsfiddle.net/4ebnE/

ただし、colgroupHTML5 では非推奨です。ただし、HTML5 はまだ標準化されていないため、呼び出しを行うことができます。

ああ、お望みであれば、CSS なしで行うことも可能です。

<table>
    <colgroup>
        <col width="50"/>
        <col width="180" />
    </colgroup>
    <tr>
        <td>data in first column</td>
        <td>data in second column</td>
    </tr>
    <tr>
        <td>more data in first column</td>
        <td>more data in second column</td>
    </tr>
</table>
于 2013-03-09T02:01:40.467 に答える