[CSS] テーブルの行単位でスタイルを指定する

テーブルの行単位でスタイルを指定するサンプルです。
(ここで紹介している疑似クラスは、liタグでも同様に使えます。)

テーブルの行単位でスタイルを指定する

テーブルの行単位でスタイルを指定するには、疑似クラスを使用すると簡単です。
行単位で指定する疑似クラスには以下のようなものがあります。

【行単位に関する疑似クラス】
疑似クラス説明
:first-child先頭行のみスタイルを指定する先頭行のみ背景色を赤にする
table tr:first-child{background:red;}
:last-child最終行のみスタイルを指定する最終行のみ背景色を赤にする
table tr:last-child{background:red;}
:nth-child(n)n番目の行のみスタイルを指定する3行目のみ背景色を赤にする
table tr:nth-child(3){background:red;}
:nth-child(even)偶数行のみスタイルを指定する偶数行のみ背景色を赤にする
table tr:nth-child(even){background:red;}
:nth-child(odd)奇数行のみスタイルを指定する奇数行のみ背景色を赤にする
table tr:nth-child(odd){background:red;}

例)3行目を赤くする

th行があるので、3行目を指定するにはnth-childには4を指定しています。

【結果】

No都道府県人口
1東京都13,390,116
2神奈川県9,101,625
3大阪府8,849,823
4愛知県7,447,161
5埼玉県7,240,300

nth-childの行数指定は、ヘッダー行も1行と数えるのでご注意ください。

メモ


コメント

タイトルとURLをコピーしました