テーブルの背景色をみやすくする
たくさんの行があったり、情報量が多かった場合に、テーブル背景色を変えてみやすくしたい場合は多いと思います
どんなに多くても、簡単に1行ごとに交互に色を変えていく仕様をCSSで設定できます
| 1 | いか |
| 2 | りんご |
| 3 | ラムネ |
| 4 | コーラ |
| 5 | チャーハン |
上の表を下の表のように、色分けしていきます
| 1 | いか |
| 2 | りんご |
| 3 | ラムネ |
| 4 | コーラ |
| 5 | チャーハン |
背景色の塗り分けのところだけのコードを示していくと、まず、全体のマスの背景色を白にしています
/*↓テーブルのマスの背景色を白に*/
td {background-color: white;}
そして、下の表<table>に、class「nuri」を設定した上で、
擬似クラスnth-of-typeを使って、偶数行の背景色を変えています
/*↓nuriクラスの、偶数番目のtr要素の子要素tdの背景色をアクアマリンに*/
.nuri tr:nth-of-type(even) td{background-color: aquamarine;
}
順番も大事で、全体のテーブルマスを白にする設定を後ろに記述してしまうと、
上書きしてすべての背景色が白になる設定になるので注意が必要です
参考
:nth-of-type