CSSだけで表の列を一括装飾する書き方2通り

それでは、HTMLソースを編集することなく、CSS(スタイルシート)の記述だけで表の列を一括装飾する方法を解説いたします。具体的な記述例の前に、まずは書き方の概要をざっとご紹介いたします。

【このページの目次】  

CSS3のnth-of-typeやnth-child疑似クラスを使って表の列を一括装飾

CSS3のnth-of-typeやnth-child疑似クラスを使うと、表の列を一括装飾するのはとても簡単です。

セルをtd要素だけで作っている場合
もし、すべてのセルをtd要素だけで作っているなら以下のように記述します。
tr td:nth-of-type(1) { ~1列目(1つ目のtd要素)の装飾~ }
tr td:nth-of-type(2) { ~2列目(2つ目のtd要素)の装飾~ }
tr td:nth-of-type(3) { ~3列目(3つ目のtd要素)の装飾~ }
tr td:nth-of-type(4) { ~4列目(4つ目のtd要素)の装飾~ }
tr td:nth-of-type(5) { ~5列目(5つ目のtd要素)の装飾~ }
上記は、表の各セルがtd要素で作られている場合の例です。 nth-of-type疑似クラスは、「n番目の要素」に限定して装飾できる疑似クラスです。tr要素で作る「1行」の中で、「1番目に登場するtd要素」とは「1列目」のことです。「2番目に登場するtd要素」とは「2列目」のことです。つまり、この方法で、列ごとに一括装飾できるわけです。

セルをth要素とtd要素の混合で作っている場合
もし、先頭をth要素にして、残りのセルをtd要素で作っているなら、以下のように記述すれば良いでしょう。
tr th:nth-of-type(1) { ~1つ目のth要素(1列目)の装飾~ }
tr td:nth-of-type(1) { ~1つ目のtd要素(2列目)の装飾~ }
tr td:nth-of-type(2) { ~2つ目のtd要素(3列目)の装飾~ }
tr td:nth-of-type(3) { ~3つ目のtd要素(4列目)の装飾~ }
tr td:nth-of-type(4) { ~4つ目のtd要素(5列目)の装飾~ }
上記のnth-of-type疑似クラスを使った記述では、数字が列番号と合致しないので若干ややこしいですね。そこが気になる場合は、以下のようにnth-child疑似クラスを使って記述しても良いでしょう。
tr th:nth-child(1) { ~1列目(1つ目の子要素がth要素だった場合)の装飾~ }
tr td:nth-child(2) { ~2列目(2つ目の子要素がtd要素だった場合)の装飾~ }
tr td:nth-child(3) { ~3列目(3つ目の子要素がtd要素だった場合)の装飾~ }
tr td:nth-child(4) { ~4列目(4つ目の子要素がtd要素だった場合)の装飾~ }
tr td:nth-child(5) { ~5列目(5つ目の子要素がtd要素だった場合)の装飾~ }
この場合は、数字が列の番号と一いたします。

※先の2種類の疑似クラス「nth-of-type」と「nth-child」の違いは、以下の通りです。
 
  • 「td:nth-of-type(3)」と記述した場合の意味
    →複数のtd要素のうち、3番目に登場するtd要素
  • 「td:nth-child(3)」と記述した場合の意味
    →複数の子要素のうち、3番目の子要素がtd要素だった場合

子要素がすべて1種類の要素だけであれば、どちらを使っても同じ対象を指します。しかし、複数種類の子要素が混在している場合は、指し示す対象が異なります。例えば、
 
  1. span要素
  2. a要素
  3. span要素(◆)
  4. img要素
  5. span要素(★)

……という順序で合計5つの要素が並んでいるとき、
 
  • 「span:nth-of-type(3)」は、★を指します(=span要素の中で3番目)が、
  • 「span:nth-child(3)」は、◆を指します(=「3番目の子要素」として登場するspan要素)。

もし、3番目の子要素がspan要素ではなかった場合は、「span:nth-child(3)」の指定では何も装飾されません。

要素名を省略して、子要素の順序だけで装飾を指定する方が楽
上記のように、td要素かth要素かの区別が面倒なら、以下のように要素名を省略してしまう方法もあります。
tr :nth-child(1) { ~1列目の装飾~ }
tr :nth-child(2) { ~2列目の装飾~ }
tr :nth-child(3) { ~3列目の装飾~ }
tr :nth-child(4) { ~4列目の装飾~ }
tr :nth-child(5) { ~5列目の装飾~ }
上記の場合は、tr要素(=1行)に含まれる要素のうち、1つ目~5つ目の子要素(要素の種類は何でも)を対象にして装飾しています。「tr」と「:nth-child」との間には空白が必要ですので、詰めないよう注意して下さい。

 

CSS2.1の隣接兄弟セレクタを使って、表の列を一括装飾

古いブラウザを考慮する必要があるなど、何らかの事情でCSS3が使えない場合でも、 CSS2.1の隣接兄弟セレクタを使うことで、表の列を一括装飾できます。

セルをtd要素だけで作成している場合
tr td { ~1列目(以降)の装飾~ }
tr td + td { ~2列目(以降)の装飾~ }
tr td + td + td { ~3列目(以降)の装飾~ }
tr td + td + td + td { ~4列目(以降)の装飾~ }
tr td + td + td + td + td { ~5列目(以降)の装飾~ }
上記のように「+」記号を使って記述する隣接兄弟セレクタは、「指定の要素の隣にある要素」を対象にして装飾できます。つまり、上記の5行のソースは以下のような意味になります。
 
  1. 「tr要素に含まれるtd要素」(=1列目以降)が対象
  2. 『「tr要素に含まれるtd要素」の隣にあるtd要素』(=2列目以降)が対象
  3. 〔『「tr要素に含まれるtd要素」の隣にあるtd要素』の隣にあるtd要素〕(=3列目以降)が対象
  4. 《〔『「tr要素に含まれるtd要素」の隣にあるtd要素』の隣にあるtd要素〕の隣にあるtd要素》(=4列目以降)が対象
  5. {《〔『「tr要素に含まれるtd要素」の隣にあるtd要素』の隣にあるtd要素〕の隣にあるtd要素》の隣にあるtd要素}(=5列目以降)が対象

この場合、「1列目のための装飾」は「1列目以降全部の列」に適用され、「2列目のための装飾」は「2列目以降全部の列」に適用され……というように、後方にすべて適用される点に注意が必要です。1列ずつ個別に適用されるわけではありません。

th要素とtd要素の混合で作成している場合
もし、「1列目だけはth要素で作成してあり、2列目以降はすべてtd要素で作成してある」という場合なら、以下のように記述することで、1列ずつ個別に装飾できます。
tr th { ~1列目の装飾~ }
tr th + td { ~2列目の装飾~ }
tr th + td + td { ~3列目の装飾~ }
tr th + td + td + td { ~4列目の装飾~ }
tr th + td + td + td + td { ~5列目の装飾~ }
この場合は、「1列目のための装飾」は「1列目(=th要素)」だけに適用されますし、「2列目のための装飾」は「2列目(=th要素の隣のtd要素)」だけに適用されます。ただし、th要素が複数個ある場合は、1列ごとの装飾にはなりません。

さて、ここまでで、CSSソースだけで表の列(縦方向)を一括装飾する方法の概要をご紹介いたしました。最後に、具体的な表のサンプルを用意して、実際に列を一括して装飾する例をご紹介いたします