CSS: tableの奇数行と偶数行で色を変える
テーブルの奇数行と偶数行で色を変えると表が見やすくなります。 色を変えるには「:nth-child(n)」セレクタをを使用します。
「tr:nth-child(2)」と指定した場合は、trの親要素であるtable要素から見て、 2番目のtd要素になります。「tr:nth-child(3)」とした場合は3番目です。
nth-child(n)のカッコ内に n を指定すると「n = 0, 1, 2, 3, ...」 の意味となり、一括で指定できます。
奇数行を指定する場合は「tr:nth-child(2n+1)」、 偶数行を指定する場合は「tr:nth-child(2n)」と記述します。
奇数行と偶数行で色を変えるサンプルコード
下のテーブルは「tr:nth-child(2n)」を使って偶数行の色を変更しています。ヘッダ | ヘッダ | ヘッダ |
---|---|---|
データ | データ | データ |
データ | データ | データ |
データ | データ | データ |
データ | データ | データ |
データ | データ | データ |
データ | データ | データ |
table { border-collapse: separate; } table, td, th { border: 1px solid black; } tr:nth-child(2n) { background-color: lightblue; }