各行でクラス属性を使用せずに CSS スタイルでテーブル行を代替できますか?

CSS を使用してテーブルの行の色を変更する

テーブルのスタイルを設定する場合、代替の行の色を作成するのは一般的な作業です。以下の例に示すように、伝統的にテーブル行 (TR) にクラス属性を使用することが一般的なアプローチです。

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

ただし、より大きなテーブルを扱う場合、この方法は退屈になる可能性があります。では、CSS を使用して、クラス属性なしで代替行のスタイルを設定できますか?

Table クラスを使用したスタイル

答えは「はい」です。テーブル自体 (table.alternate_color) のクラス属性を使用すると、各行のクラス属性を使用した場合と同じ結果が得られます。

table.alternate_color tbody tr:nth-child(odd) {
  background-color: #CC9999;
  color: black;
}
table.alternate_color tbody tr:nth-child(even) {
  background-color: #9999CC;
  color: black;
}

このメソッドには柔軟性があり、スタイルを簡単に変更できます。

jQuery の使用

もう 1 つの方法では、jQuery を使用してテーブルの行を操作します。このソリューションは、レンダリング プロセスをより詳細に制御したい場合に適しています。

$(document).ready(function() {
  $("tr:odd").css({
    "background-color": "#000",
    "color": "#fff"
  });
});

CSS nth-child を使用した代替行の色

さらに、CSS nth-child セレクターを使用して指定することもできます。代替行のスタイル:

tbody tr:nth-child(odd) {
  background-color: #4C8BF5;
  color: #fff;
}

これらのテクニックを利用すると、代替行の色を使用して動的で視覚的に魅力的な表を作成できます。 CSS を使用します。

以上が各行でクラス属性を使用せずに CSS スタイルでテーブル行を代替できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。