tableの行の色を交互に変えるCSSの書き方

データを一覧表示させる際にテーブルを使うことは多いと思います。

しかしデータの表示項目が多いと目がちかちかして見にくくなってしまいます。

そんなときデータの行を1行1行色を変えると見やすくなります。

CSSで簡単にできるのでご紹介します。

tableの行の色を交互に変えるCSSの書き方

まずデータテーブルを用意しましょう。

<table id="table1" style="width: 100%;">
  <tbody>
    <tr>
      <th>ID</th>
      <th>名前</th>
      <th>性別</th>
      <th>生年月日</th>
      <th>好きな色</th>
      <th>好きな食べ物</th>
    </tr>
    <tr>
      <td>1</td>
      <td>あいうえお</td>
      <td>男性</td>
      <td>2001/1/1</td>
      <td>赤</td>
      <td>りんご</td>
    </tr>
    <tr>
      <td>2</td>
      <td>かきくけこ</td>
      <td>女性</td>
      <td>2002/2/2</td>
      <td>青</td>
      <td>みかん</td>
    </tr>
    <tr>
      <td>3</td>
      <td>さしすせそ</td>
      <td>女性</td>
      <td>2003/3/3</td>
      <td>黄色</td>
      <td>マグロ</td>
    </tr>
  </tbody>
</table>

こんな感じでしょうか。

3行くらいだとまだ見やすいですが、100行くらいあるとまじで目がちかちかします。（あれ？歳やでかな？）

このテーブルの行にCSSで色をつけようとすると通常は次のように書きます。

#table1 td {
  background-color: #ffdaf8;
}

でもこれだと全ての td タグの色が変わってしまいます。

1行ごとに色を変えるには疑似クラスの nth-child() を使います。

行ごとに色を変えるので疑似クラスをあてるのは tr タグになります。

#table1 tr:nth-child(2n+1) td {
  background-color: #ffdaf8;
}

引数は、何番目の要素かを指定します。

上の例のように 2n+1 を指定すると奇数番目の要素になります。

結果は次のようになります。

trタグの1行目がヘッダー行になっているためデータエリアは偶数番目の色が変わっているように見えます。

ヘッダー行のセルはthタグを使っているので色が変わりません。

偶数番目の要素を指定する場合は、2n と書きます。

ちなみに 3 と数値だけを入れると「3番目の要素に」という意味になります。

まとめ

1行ごとに色を変えるには、nth-child() を使う。

td タグではなく tr タグを指定することで行全体の色を変えれる。

引数に 2n+1 と入れることで奇数行を指定できる。

偶数行の場合は 2n を指定する。