WEB帳
tableの縦一列を一括指定

テーブルを使って商品やサービスの一覧紹介などでよくあるパータンで最後の列で金額を表示する場合などがあります。
その時に金額だけ右詰にしたいけど量が多いと１つずつ指定するのが面倒くさいですよね！そんな時に使えるテクニックです。

セルを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要素)の装飾～ }

セルを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列目)の装飾～ }

列の番号で指定

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要素だった場合)の装飾～ }

要素名を省略して、子要素の順序だけで装飾を指定

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列目の装飾～ }

セルを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列目(以降)の装飾～ }

th要素とtd要素の混合で作成している場合

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列目の装飾～ }

【参考Webサイト】

• CSSのnth-childやnth-of-typeで表の縦(列)を一括装飾

コメント（0件）

tableの縦一列を一括指定に対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。

【ソーシャルボタン】

• 
• Tweet