方法-ゼブラストライプテーブル
CSSを使用してゼブラストライプテーブルを作成する方法を学びます。
ゼブラストライピングテーブル
ファーストネーム | 苗字 | ポイント |
---|---|---|
ジル | スミス | 50 |
イブ | ジャクソン | 94 |
アダム | ジョンソン | 67 |
ゼブラストライプのテーブルを作成するには、nth-child()
セレクターを使用して、すべての偶数(または奇数)のテーブル行に背景色を追加します。
例
tr:nth-child(even) {
background-color: #f2f2f2;
}
テーブルのスタイル設定方法の詳細については、 CSSテーブルチュートリアルにアクセスしてください。
nth-child()セレクターの詳細については、CSSセレクターリファレンスにアクセスしてください。