HTMLのTABLEを縦に縞々（縦縞でCSSハック使わない編）

縞々は好きですか？
ジークしましま！

自分用メモ！
tableの列を縞々・文字寄せ・ボールドかけしたいときー

td:nth-child(even) {
background : #fff0f0 ;
}

td:nth-child(odd)  {
background : #ffffff ;
}

等でIE以外のCSS3対応ブラウザはピンクの縞々

IE6とIE7はcolのバグを使って
<coL class="c01"><col class="c02><col class="c03">・・・
とhtmlに仕込んでおいて

.co1 td, .c03 td {
background : #fff0f0f0 ;
}

.col02 td, .col04 td {
background : #ffffff ;
}

でピンクの縞々

それ以外のIE8とかには
一列めはtd
ニ列めはtd+td
三列めはtd+td+td・・・

って隣接セレクタを使ってずらずら上書きしていけばOK

みそはcolに対してCSSを書いてもtdはcolの子孫要素じゃないのでbackground・widthとか
限定されたプロパティしか効かないのにIE(笑)は効いちゃうからそれを存分に利用しよう
という話

しましまばんざい