HTMLテーブルのスタイリング
CSSを使用して、テーブルの見栄えを良くします。
HTMLテーブル-ゼブラストライプ
テーブルの1行おきに背景色を追加すると、ゼブラストライプの効果が得られます。
1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
他のすべてのテーブル行要素のスタイルを設定するには、次の:nth-child(even)
ようにセレクターを使用します。
例
tr:nth-child(even) {
background-color: #D6EEEE;
}
注:(odd)
の代わりにを使用すると
(even)
、2、4、6などではなく1、3、5行などでスタイリングが発生します。
HTMLテーブル-垂直ゼブラストライプ
縦のゼブラストライプを作成するには、1行おきではなく、1列おきにスタイルを設定し ます。
1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
:nth-child(even)
次のようにテーブルデータ要素のを設定します。
例
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
注:
ヘッダーと通常のテーブルセルの両方にスタイルを設定する場合は、両方の要素と要素に:nth-child()
セレクターを配置します。th
td
垂直と水平のゼブラストライプを組み合わせる
上記の2つの例のスタイルを組み合わせると、1行おきと1列おきにストライプができます。
透明色を使用すると、重なり合う効果が得られます。
色を使用して、rgba()
色の透明度を指定します。
例
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150,
212, 212, 0.4);
}
水平分周器
ファーストネーム | 苗字 | 貯蓄 |
---|---|---|
ピーター | グリフィン | 100ドル |
ロイス | グリフィン | 150ドル |
ジョー | スワンソン | 300ドル |
各テーブル行の下部にのみ境界線を指定すると、水平方向の仕切りのあるテーブルになります。
border-bottom
プロパティをすべての
要素に追加して、tr
水平分割を取得します。
例
tr {
border-bottom: 1px solid #ddd;
}
ホバー可能なテーブル
:hover
セレクターを上
に使用してtr
、マウスオーバーでテーブル行を強調表示します。
ファーストネーム | 苗字 | 貯蓄 |
---|---|---|
ピーター | グリフィン | 100ドル |
ロイス | グリフィン | 150ドル |
ジョー | スワンソン | 300ドル |
例
tr:hover {background-color: #D6EEEE;}