テーブルの背景色をしましまにしたい場合は
「:nth-child(even)」または「:nth-child(odd)」を使用します。
サンプル
例）奇数行の色をグレー、偶数行の色を白とする
|
1 2 3 4 5 6 7 8 9 |
/* 奇数行のスタイル */ table.sample tr:nth-child(odd){ background-color:#f0f0f0; } /* 偶数行のスタイル */ table.sample tr:nth-child(even){ background-color:white; } |
|
1 2 3 4 5 6 7 8 |
<table class="sample"> <tr><th>No</th><th>都道府県</th><th>人口</th></tr> <tr><td>1</td><td>東京都</td><td>13,390,116</td></tr> <tr><td>2</td><td>神奈川県</td><td>9,101,625</td></tr> <tr><td>3</td><td>大阪府</td><td>8,849,823</td></tr> <tr><td>4</td><td>愛知県</td><td>7,447,161</td></tr> <tr><td>5</td><td>埼玉県</td><td>7,240,300</td></tr> </table> |
【結果】
| No | 都道府県 | 人口 |
|---|---|---|
| 1 | 東京都 | 13,390,116 |
| 2 | 神奈川県 | 9,101,625 |
| 3 | 大阪府 | 8,849,823 |
| 4 | 愛知県 | 7,447,161 |
| 5 | 埼玉県 | 7,240,300 |
メモ
- 奇数行に色を指定したい場合は:nth-child(even)を、偶数行に色を指定したい場合は:nth-child(odd)を使用します。
- テーブルの背景色を縞々にすると、手軽にユーザビリティを向上させる事ができるのでおすすめです。
コメント