1

ページには、多くの列を持つ多くのHTMLテーブルがあります。それらに異なるスタイルを適用する必要があります。すべての列の幅は異なりますが、テーブルでは同じになります。つまり、すべてのテーブルの最初の列が同じになり、2番目の列とすべての列が同じになります。

CSSはテーブルには適用されますが、列には適用されません。cssクラスを追加するだけで、HTMLコードに適用する必要がなく、自動的に適用される方法はありますか。疑似列または他の方法を使用している可能性がありますか？

4

2 に答える 2

4

CSS をサポートするブラウザーを使用できる場合はnth-child()、以下を使用できます。

tr td:nth-child(even) {
    background-color: #ffa;
}

JS フィドルのデモ。

上記のデモでは:nth-child(even)、最初の要素 (行見出しを含む) のスタイル設定を避けるために使用しましtdたが、もちろん、行見出しをth要素に含めることもできます (おそらく意味的に正しいでしょう)。odd列 (またはodd td要素)をスタイルするが、 をスタイルしない場合は:first-child、:not()セレクターを使用できます。

tr td:nth-child(odd):not(:first-child) {
    background-color: #ffa;
}

JS フィドルのデモ。

:nth-child()疑似クラスをサポートしていない古いブラウザーをサポートする必要があるという制限がある場合は、隣接する兄弟セレクターを使用できます (ただし、これは保守性が低くなります)。

td + td, /* styles the second td */
td + td + td + td { /* styles the fourth td */
    background-color: #ffa;
}

td + td + td { /* styles the third td */
    background-color: #fff;
}

JS フィドルのデモ。

クラスを使用してスタイルを設定する方が簡単ですがodd( (または)にのみ提供されている場合でもeven:

.even { /* styles the cells with the class of 'even' */
    background-color: #ffa;
}

.even + td { /* styles the cell that follows the cell with the 'even' class */
    background-color: #f90;
}

colgroupおよびcol要素を使用して、列のクラスを定義することもできます。

<table>
    <colgroup>
        <col class="first" />
        <col class="second" />
        <col class="third" />
        <col class="fourth" />
    </colgroup>
    <thead>
        <tr>
            <th></th>
            <th>Column one</th>
            <th>Column two</th>
            <th>Column three</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row one</td>
            <td>row one, cell one</td>
            <td>row one, cell two</td>
            <td>row one, cell three</td>
        </tr>
        <tr>
            <td>Row two</td>
            <td>row two, cell one</td>
            <td>row two, cell two</td>
            <td>row two, cell three</td>
        </tr>
    </tbody>
</table>

例として次の CSS を使用します (他のクラスのスタイルを設定しない理由はないことに注意してくださいcol。このデモではスタイルを設定しないことを選択しただけです)。

.second, .fourth {
    background-color: #ffa;
}​

JS フィドルのデモ。

参考文献:

于 2012-11-11T22:49:16.947 に答える
0

CSS3 の「n 番目」のセレクターを使用できますが、古いブラウザーでは機能しません。したがって、最善の解決策は、ページが読み込まれた後に javascript (jQuery の例) で変更を適用することです。

$(function() {
    $("table tr td:nth-child(n)").css('width', '100px');
});

または、クラスを追加できます

$("table tr td:nth-child(n)").addClass("myWidth1");

そしてあなたのCSSで

.myWidth1{ width: 100px }

テーブルセレクターがすべてのテーブルをキャッチしていることを確認してください。

于 2012-11-11T22:23:10.217 に答える