タグ別アーカイブ: CSS3

テーブルを行ごとに色分けする

TwentyTwelveのテーブルがシンプル過ぎて見づらかったので、CSSをちょっといじってみた。

CSS3には、E:nth-child(n)という便利な擬似クラスがあり、E:nth-child(odd)で奇数行、E:nth-child(even)で偶数行のスタイルを定義できる。

これを使って、テーブルを行ごとに色分けしてみた。行ごとに色分けするにはtrタグに対してnth-childを適用する。列ごとならtdに適用すればよい。

テーブルを書いてみると、こんな感じで表示される。

りんご ばなな
英語名 Apple Banana
赤い 黄色い
丸い 長い
硬さ ちょっと固い 柔らかい
すっぱい 甘い