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

2019年7月14日

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

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

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

【行単位に関する疑似クラス】
疑似クラス	説明	例
:first-child	先頭行のみスタイルを指定する	先頭行のみ背景色を赤にする table tr:first-child{background:red;}
:last-child	最終行のみスタイルを指定する	最終行のみ背景色を赤にする table tr:last-child{background:red;}
:nth-child(n)	ｎ番目の行のみスタイルを指定する	３行目のみ背景色を赤にする 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行目のスタイル */
table.sample tr:nth-child(4){
  background-color:red;
}

/* 3行目のスタイル */

table.sample tr:nth-child(4){

background-color:red;

}

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

<table class="sample">
  <tr><th>No</th><th>都道府県</th><th>人口</th></tr>
  <tr><td>1</td><td>東京都</td><td>13,390,116</td></tr>
  <tr><td>2</td><td>神奈川県</td><td>9,101,625</td></tr>
  <tr><td>3</td><td>大阪府</td><td>8,849,823</td></tr>
  <tr><td>4</td><td>愛知県</td><td>7,447,161</td></tr>
  <tr><td>5</td><td>埼玉県</td><td>7,240,300</td></tr>
</table>

</table>

【結果】

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

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

メモ

他の疑似クラスについては以下ページをご覧ください
→[CSS] 疑似クラス一覧

CSS

Posted by tora