条件付き代替表の行のスタイル

Question

代替の表の行を、代替の<tr>タグでクラスを定義せずにスタイルできますか？

次の表で、CSSは代替の行スタイルに「行1 /行2」というクラスを指定する必要はありませんか？ row1はデフォルトにすることができるので、row2が問題になります。

<style> 
.altTable td { } 
.altTable .row2 td { background-color: #EEE; } 
</style> 

<table class="altTable"> 
<thead><tr><td></td></tr></thead> 
<tbody> 
    <tr><td></td></tr> 
    <tr class="row2"><td></td></tr> 
    <tr><td></td></tr> 
    <tr class="row2"><td></td></tr> 
</tbody> 
</table> 

Answer 1

tr:nth-child(even) { background: #FFF; } 
tr:nth-child(odd) { background: #EEE; } 

はIEでは動作しませんが、それは純粋にプレゼンテーションのことだ、コンテンツが正常に動作しますとにかく、私はそれが大きな問題だとは思わない - あなたのサイトの通常のIEユーザーの割合に応じて。

Answer 2

tbodyでrow2のクラスを与えて、クラスrow1で代替の行をスタイル設定します。他の行はtbodyからクラスrow2を継承します。

<style> 
.row1 { color: red } 
.row2 { color: blue } 
</style> 

<table class="altTable"> 
<thead><tr><td></td></tr></thead> 
<tbody class="row2"> 
    <tr class="row1"><td>row 1</td></tr> 
    <tr><td>row 2</td></tr> 
    <tr class="row1"><td>row 1</td></tr> 
    <tr><td>row 2</td></tr> 
</tbody> 
</table> 

Answer 3

はい！あなたは純粋なCSSやCSSの「+」セレクタをサポートするブラウザには何のクラスでそれを行うことができます。

.altTable tr td, 
.altTable tr+tr+tr td, 
.altTable tr+tr+tr+tr+tr td { background-color: #EEE; } 

.altTable tr+tr td, 
.altTable tr+tr+tr+tr td, 
.altTable tr+tr+tr+tr+tr+tr td{ background-color: #fff; } 

おそらくない最良の方法、なんとかし。

あなたは少しJavascriptを気にしない場合は、jQueryのは非常に簡潔にあなたにそれを与える：

$('.altTable tr:odd').addClass('odd');