CSSでtableの行ごと、列ごとにスタイルをあてる方法

CSS3から疑似クラスを使用すれば1行目のスタイル、2行目のスタイルというように行ごと、また、列ごとにスタイルをあてることができるようです。

列ごとにスタイルをあてるにはtr:nth-of-typeを使用します。基底値は1です。以下のように(1)(2)というように列数を指定すれば、その列に対してスタイルをあてることができます。

<style>
// 1列目のスタイル
table tr:nth-of-type(1){
  font-size: 7px;
}
// 2列目のスタイル
table tr:nth-of-type(2){
  font-size: 20px;
}
</style>

次に、行ごとにスタイルをあてるにはnth-childを使用します。基底値は1です。以下のように(1)(2)というように行数を指定すれば、その列に対してスタイルをあてることができます。

CSS2.1だと、以下のようにすれば同様のことができるようです。

tr td + td {
  // 2列目のスタイル
}
tr td + td + td {
  // 3列目のスタイル
}

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

コメント