【CSS】CSSを使ってテーブルの偶数行目だけ背景色を変える
![css_table_nth-child](https://i0.wp.com/site-manage.net/wp-content/uploads/css_table_nth-child.jpg?resize=610%2C407&ssl=1)
テーブルは行が増えるにつれ見にくくなるので、
偶数行目だけ背景色を変えてCSSで見やすくしてみます。
<table class="table"> <tr> <td>◯◯◯◯</td> <td>△△△△</td> <td>☆☆☆☆</td> </tr> <tr> <td>◯◯◯◯</td> <td>△△△△</td> <td>☆☆☆☆</td> </tr> <tr> <td>◯◯◯◯</td> <td>△△△△</td> <td>☆☆☆☆</td> </tr> <tr> <td>◯◯◯◯</td> <td>△△△△</td> <td>☆☆☆☆</td> </tr> </table>
.table, .table td, .table th { border-collapse: collapse; border: 1px solid #666; } .table td, .table th { padding: 10px; } .table tr:nth-child(even) td { background: #ededed; /* 偶数のみ */ }
見やすいですね。
マウスオーバーしたらセルの背景色を変える
.table td:hover, .table th:hover { background: #ededed; }
カーソルを合わせたセルの色を変えることもできます。
(カーソルが見えませんが一番上の☆☆☆☆を指差しています)
関連記事