CSSでテーブルの行・列の背景色を交互に指定する方法

2019/4/28 CSS

こんにちは、さるまりんです。

久しぶりのCSSです。

テーブルの行と列ってどっちがどっちかわからなくなることがあります。

行：rows – 横です。

列：columns – 縦です。

それはいいのですが、CSSでテーブルの背景色を交互に指定する方法です。

どちらもnth-child()を利用します。

列ごとに指定するにはテーブルの<td>に対してCSSを設定します。

td:nth-child(2n) {
    background-color: [偶数番目の背景色の指定];
}
td:nth-child(2n-1) {
    background-color: [奇数番目の背景色の指定];
}

上のテーブルでは偶数列目の背景に#f0f8ff、奇数列目の背景に#7fffd4を指定しています。

偶数を表すのにeven、奇数を表すのにoddも利用できます。上のCSSは以下のように書き換えることができます。

td:nth-child(even) {
    background-color: [偶数番目の背景色の指定];
}
td:nth-child(odd) {
    background-color: [奇数番目の背景色の指定];
}

今度は行です。行ごとに指定するにはテーブルの<tr>に対してCSSを設定します。

tr:nth-child(2n) {
    background-color: [偶数番目の背景色の指定];
}
tr:nth-child(2n-1) {
    background-color: [奇数番目の背景色の指定];
}