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)このようなセレクタ：
ノート：使用する場合(odd)それ以外の(even)、スタイリングは行 2、4、6 などではなく、行 1、3、5 などで発生します。
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)次のようなテーブル データ要素の場合:
ノート：置く: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水平方向の仕切りを取得する要素:
ホバー可能なテーブル
使用:hoverセレクターオンtrマウスオーバーで表の行を強調表示するには:
|
ファーストネーム |
苗字 |
貯蓄 |
|---|---|---|
| ピーター | グリフィン | $100 |
| ロイス | グリフィン | $150 |
| ジョー | スワンソン | $300 |