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

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

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

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

サンプル

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

サンプル

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA