【HTML】tableの特定の列だけCSSで一括装飾する方法(nth-of-typeの使い方)
サイトに表を載せるとき
「1列目だけ文字を大きくしたい」とか
「3列目だけ中央寄せにしたい」とか
特定の列だけ表示の仕方を変えたい場合があります
そういう場合は「nth-of-type」を使うと特定の列や行だけをcssで修飾できます
特定の列だけ: td:nth-of-type(x)
| 1-1 | 1-2 | 1-3 | 1-4 | 1-5 |
|---|---|---|---|---|
| 2-1 | 2-2 | 2-3 | 2-4 | 2-5 |
| 3-1 | 3-2 | 3-3 | 3-4 | 3-5 |
| 4-1 | 4-2 | 4-3 | 4-4 | 4-5 |
| 5-1 | 5-2 | 5-3 | 5-4 | 5-5 |
| 6-1 | 6-2 | 6-3 | 6-4 | 6-5 |
table td:nth-of-type(2) {
background-color: red;
}
上記のようなCSSで特定の列だけ背景色を赤くできます
「td:nth-of-type(x)」の「(x)」の部分に列番号を指定します
「background-color: red; 」なので背景色が赤くなっていますが
ここを
「 font-size:100px;」みたいにすれば文字が大きくなりますし
「writing-mode: vertical-rl;」みたいにすれば縦書きになります
特定の列より左側だけ: td:nth-of-type(-n+x)
| 1-1 | 1-2 | 1-3 | 1-4 | 1-5 |
|---|---|---|---|---|
| 2-1 | 2-2 | 2-3 | 2-4 | 2-5 |
| 3-1 | 3-2 | 3-3 | 3-4 | 3-5 |
| 4-1 | 4-2 | 4-3 | 4-4 | 4-5 |
| 5-1 | 5-2 | 5-3 | 5-4 | 5-5 |
| 6-1 | 6-2 | 6-3 | 6-4 | 6-5 |
td:nth-of-type(-n+2) {
background-color: red;
}
上記のようなCSSで1～2列目だけ背景色を赤くできます
「td:nth-of-type(-n+x)」の「(x)」の部分に列番号を指定すると
x列目よりも左側にもcssが適用されます
特定の列より右側だけ: td:nth-of-type(n+x)
| 1-1 | 1-2 | 1-3 | 1-4 | 1-5 |
|---|---|---|---|---|
| 2-1 | 2-2 | 2-3 | 2-4 | 2-5 |
| 3-1 | 3-2 | 3-3 | 3-4 | 3-5 |
| 4-1 | 4-2 | 4-3 | 4-4 | 4-5 |
| 5-1 | 5-2 | 5-3 | 5-4 | 5-5 |
| 6-1 | 6-2 | 6-3 | 6-4 | 6-5 |
td:nth-of-type(n+2) {
background-color: red;
}
上記のようなCSSで2～5列目だけ背景色を赤くできます
「td:nth-of-type(n+x)」の「(x)」の部分に列番号を指定すると
x列目よりも右側にもcssが適用されます
【HTML】tableの特定の行だけCSSで一括装飾する方法(nth-of-typeの使い方)
| 1-1 | 1-2 | 1-3 | 1-4 | 1-5 |
|---|---|---|---|---|
| 2-1 | 2-2 | 2-3 | 2-4 | 2-5 |
| 3-1 | 3-2 | 3-3 | 3-4 | 3-5 |
| 4-1 | 4-2 | 4-3 | 4-4 | 4-5 |
| 5-1 | 5-2 | 5-3 | 5-4 | 5-5 |
| 6-1 | 6-2 | 6-3 | 6-4 | 6-5 |
tr:nth-of-type(3) {
background-color: red;
}
tdタグに「nth-of-type」を使うと列指定でしたが
trタグに「nth-of-type」を使うと行指定ができます
疑似クラスnth-of-typeの応用
- :nth-of-type(2n) ･･･ 偶数番目の要素にCSSを適用
- :nth-of-type(2n+1) ･･･奇数番目の要素にCSSを適用
- :nth-of-type(3n) ･･･ 3の倍数番目（3,6,9,12,…）の要素にCSSを適用
- :nth-of-type(3n+1) ･･･ 3の倍数+1番目（1,4,7,10,…）の要素にCSSを適用
| 日付 | ゲスト |
|---|---|
| 1/1(月) | 伊藤理々杏 |
| 1/2(火) | 岩本蓮加 |
| 1/3(水) | 梅澤美波 |
| 1/4(木) | 久保史緒里 |
| 1/5(金) | 阪口珠美 |
| 1/8(月) | 佐藤楓 |
| 1/9(火) | 中村麗乃 |
| 1/10(水) | 向井葉月 |
| 1/11(木) | 山下美月 |
| 1/12(金) | 吉田綾乃クリスティー |
| 1/15(月) | 与田祐希 |
| 1/16(火) | 遠藤さくら |
| 1/17(水) | 賀喜遥香 |
| 1/18(木) | 金川紗耶 |
| 1/19(金) | 柴田柚菜 |
| 1/22(月) | 清宮レイ |
| 1/23(火) | 田村真佑 |
| 1/24(水) | 筒井あやめ |
| 1/25(木) | 矢久保美緒 |
| 1/26(金) | 黒見明香 |
<table class="t5">
(中略)
</table>
みたいにtableタグにクラスを指定して
table.t5 tr:nth-of-type(10n+2),
table.t5 tr:nth-of-type(10n+3),
table.t5 tr:nth-of-type(10n+4),
table.t5 tr:nth-of-type(10n+5),
table.t5 tr:nth-of-type(10n+6) {
background-color: red;
}
上記のようなCSSを書くことで
1巡目の月～金にCSSを適用、2巡目には適用せず、3巡目には適用…
みたいなことができます
「背景色ありの月～金が5個、背景色なしの月～金が5個」計10個で一塊なので
「nth-of-type(10n+x)」の中身が(10n)になっています
※5nではなく10nなのがポイント
「tr:nth-of-type(1)」は見出し行で
「tr:nth-of-type(2)」は「1/1(月)」の行です
「table.t5 tr:nth-of-type(10n+2),」の部分が月曜日の部分にCSSを適用していて
「table.t5 tr:nth-of-type(10n+3),」の部分が火曜日の部分にCSSを適用していて
「table.t5 tr:nth-of-type(10n+4),」の部分が水曜日の部分にCSSを適用していて…
というふうになっています
説明のために真っ赤な背景色にしているのでどぎつく感じますが
実用上は薄いグレーなどにして意味のあるブロック単位で色分けしてやると視認性がかなり向上します
コメント