cssでテーブルを一行おきに色変えする



いろいろと情報が多いページをまとめるのは
やはりテーブルのスタイルがまとめやすい。

けれど一行が長い&行数が多いとなると
それはそれでやはり目でおっていくのが大変。

では一行ずつ色変えをすると少しは見やすくなるね。
と誰でも考えたことはあると思いますが、
一行ごとにclassを指定していくのはめんどくさい。
ここを自動化できれば便利だと思いませんか?

この方法なら、表組が何行でも全部自動で色変えができます。
具体的には下のようになります
※もし下の表組みが全部同じ色に見えたらあなたのブラウザには対応してませんorz

タイトルタイトル
情報情報
情報情報
情報情報
情報情報

これのcssは以下のようになっています。 <style type="text/css">
#table1 {
width:500px;
border:1px solid #333333;
border-collapse:collapse;
margin:0px 0px 20px 6px;
font-size:100%;
}
#table1 td{border:1px solid #333333;padding:6px;vertical-align:top;}
#table1 th{border:1px solid #000000;padding:6px;vertical-align:top;}
#table1 tr:nth-child(odd) td{ background-color:#F0F8FF;color:#333333;}
#table1 tr:nth-child(even) td{background-color:#ffff99;color:#333333;}
</style>

記事id:700 / 2609PV

関連記事