【CSS】tableの背景色を奇数行・偶数行ごとに交互に指定する方法

今日は覚えておくと便利なテーブルのデザインについてです。
タイトル通り、<table> タグで作成したテーブルの背景色を、奇数行・偶数行ごとに指定する方法です。
こちらを使えば、行の背景色を 赤、白、赤、白…というように交互になるように指定することができ、見た目的にもかなり見やすくなります。

今回参考にさせていただいた記事はこちらから。

テーブルの奇数行、偶数行ごとに背景色を設定する | GRAYCODE HTML&CSS
https://gray-code.com/html_css/setting-background-color-for-each-table-line/

まず、HTML のサンプルはこんな感じにします。

<table>
  <tr><th>見出し1</th><td>詳細1</td></tr>
  <tr><th>見出し2</th><td>詳細2</td></tr>
  <tr><th>見出し3</th><td>詳細3</td></tr>
</table>

CSS のサンプルはこちら。

table tr {
  background-color: rgba(255, 0, 0, 0.3);
}
table tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.4);
}

ポイントは 4行目からの行の背景色の設定です。
tr の疑似クラスを使用して tr:nth-child(odd) とすることで、奇数行の背景色を白色に上書きしています。
こちらを行うことで、テーブル行の背景色が白色と赤色の交互になるように指定できます。

なお、偶数行の色を白色に指定したい場合は下記のようにします。

table tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.4);
}

偶数行の指定をする場合は tr:nth-child(even) を使います。

設定としては以上です！
勿論、背景色だけでなく、文字色なども変更できます。

以上、<table> タグで作成したテーブルの背景色を奇数行・偶数行ごとに設定する方法でした。
ご参考になれば幸いです。