CSS テーブルの行や列を色分けする

css

情報元:CSSのテーブルで色分けをする場合 | OKWave
http://okwave.jp/qa/q1233020.html

行単位で装飾したいのならばtdではなく、trにclassを指定してはどうでしょう。

HTML

aaa bbb

・・・

AAA BBB

・・・
CSS
tr.xxx td {background-color:#888;}
↑class=’xxx’の tr の配下にある td というセレクタになります。

なお、テーブルはいくつかのブロックに分けられます。
色を変えたいというならば意味があるのでしょうから、ブロックを変える
→thead、tbodyを使い分ける、tbodyでも別のブロックにする
セルの種類を変える
→td、thを使い分ける
等、そうした区別を検討してもいいのかも。

出席番号 名前
1 木村太郎
2 山田花子

各ブロックのセルの背景色を変えるには
thead th{backgrond-color:xxx;}
tbody.male th,tbody.male td{backgrond-color:xxx;}
tbody.female th,tbody.female td{backgrond-color:xxx;}

カテゴリーcss

コメントを残す

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