[CSS] テーブルの列単位でスタイルを指定する（nth-of-type）

2019年5月1日

列単位でスタイルシートを指定したい場合は、nth-of-type疑似クラスを使用します。

例えば、表の３列目を右寄せで表示したいなどテーブルの列単位でスタイルを指定できます。

サンプル

例）表の１列目を「中央寄せ」、２列目を「背景色ピンク」、３列目を「右寄せ・背景色水色」とする

/* 1列目のスタイル */
table tr td:nth-of-type(1){
  text-align:center;
}

/* 2列目のスタイル */
table tr td:nth-of-type(2){
  background-color:pink;
}

/* 3列目のスタイル */
table tr td:nth-of-type(3){
  text-align:right;
  background-color:skyblue;
}

/* 1列目のスタイル */

table tr td:nth-of-type(1){

text-align:center;

}

/* 2列目のスタイル */

table tr td:nth-of-type(2){

background-color:pink;

}

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

table tr td:nth-of-type(3){

text-align:right;

background-color:skyblue;

}

<table>
  <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>

</table>

【結果】

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

備考

nth-of-typeの引数には列の左側からの順番を指定します。
（例）一番左側の列は1、２番目は2

メモ

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

CSS

Posted by tora