データを一覧表示させる際にテーブルを使うことは多いと思います。
しかしデータの表示項目が多いと目がちかちかして見にくくなってしまいます。
そんなときデータの行を1行1行色を変えると見やすくなります。
CSSで簡単にできるのでご紹介します。
tableの行の色を交互に変えるCSSの書き方
まずデータテーブルを用意しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<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> |
| ID | 名前 | 性別 | 生年月日 | 好きな色 | 好きな食べ物 |
|---|---|---|---|---|---|
| 1 | あいうえお | 男性 | 2001/1/1 | 赤 | りんご |
| 2 | かきくけこ | 女性 | 2002/2/2 | 青 | みかん |
| 3 | さしすせそ | 女性 | 2003/3/3 | 黄色 | マグロ |
こんな感じでしょうか。
3行くらいだとまだ見やすいですが、100行くらいあるとまじで目がちかちかします。（あれ？歳やでかな？）
このテーブルの行にCSSで色をつけようとすると通常は次のように書きます。
|
1 2 3 |
#table1 td { background-color: #ffdaf8; } |
でもこれだと全ての td タグの色が変わってしまいます。
1行ごとに色を変えるには疑似クラスの nth-child() を使います。
行ごとに色を変えるので疑似クラスをあてるのは tr タグになります。
|
1 2 3 |
#table1 tr:nth-child(2n+1) td { background-color: #ffdaf8; } |
引数は、何番目の要素かを指定します。
上の例のように 2n+1 を指定すると奇数番目の要素になります。
結果は次のようになります。
| ID | 名前 | 性別 | 生年月日 | 好きな色 | 好きな食べ物 |
|---|---|---|---|---|---|
| 1 | あいうえお | 男性 | 2001/1/1 | 赤 | りんご |
| 2 | かきくけこ | 女性 | 2002/2/2 | 青 | みかん |
| 3 | さしすせそ | 女性 | 2003/3/3 | 黄色 | マグロ |
trタグの1行目がヘッダー行になっているためデータエリアは偶数番目の色が変わっているように見えます。
ヘッダー行のセルはthタグを使っているので色が変わりません。
偶数番目の要素を指定する場合は、2n と書きます。
ちなみに 3 と数値だけを入れると「3番目の要素に」という意味になります。
まとめ
1行ごとに色を変えるには、nth-child() を使う。
td タグではなく tr タグを指定することで行全体の色を変えれる。
引数に 2n+1 と入れることで奇数行を指定できる。
偶数行の場合は 2n を指定する。
はじめて投稿させていただきます。
私も別業界から転職してhtmlやcssを使う職場になり、
むねひろさんの記事をいつも参考にさせていただいております。
今回、質問させていただきたくコメントいたしました。
「マウスオーバー時にTABLEの行の背景色を変えるCSSの書き方」
に加え、
「tableの行の色を交互に変えるCSSの書き方」を行った場合
マウスオーバーでなくなったとき
交互に変えた行の色が変える前の色になってしまいます。
この場合、どのようにしたらいいのでしょうか
＞ 交互に変えた行の色が変える前の色になってしまいます。
の部分がちょっとよく分からないですが、
「交互に行の色を変える」と「マウスオーバー時に行の色を変える」を両立したいということですよね？
そして「マウスオーバー時の色を優先させたい」としたとき、
table#table1 tr:hover td {
background-color: #DDDDDD;
}
table#table1 tr:nth-child(2n+1) td {
background-color: #ffe3ff;
}
のように書くと、交互の色が優先されてしまい、hover時の色が適用されないということかと思います。
その場合は、2パターン解決方法があり、
1つ目は、
table#table1 tr:hover td {
background-color: #DDDDDD!important;
}
table#table1 tr:nth-child(2n) td {
background-color: #ffe3ff;
}
のように、「!important」をつけて、優先順位度を上げてやることでhover時の色が優先されます。
2つ目は、
table#table1 tr:nth-child(n):hover td {
background-color: #DDDDDD;
}
table#table1 tr:nth-child(2n) td {
background-color: #ffe3ff;
}
のように、hover時にもnth-childの疑似クラスを指定して()内の引数は n を指定することで全ての行という意味にすることで対応可能です。
もし、私が質問の意図を理解出来ていない場合や、もっと詳しく解説が必要な場合は再度ご連絡ください。