css - テーブル/グリッドの行の色を切り替える方法は?

Question

CSSまたはCSS3でテーブル/グリッドの行の色を切り替える方法はありますか?

<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Votes</td>
        </tr>
    </thead>
    <tbody class="rows">
        <tr>
            <td>Barack Obama</td>
            <td>50%</td>
        </tr>
        <tr>
            <td>Mitt Romney</td>
            <td>48%</td>
        </tr>
    </tbody>
</table>

たとえば、奇数行は白、偶数行は青です。

.rows tr:奇数
{
    背景色：白
}
.rows tr:偶数
{
    背景色: 青
}

それともそれは不可能ですか？

Answer 1

:nth-of-type と :nth-child 疑似要素の両方が機能します。

私は nth-of-type メソッドが好きです:

/* Zebra striping */


  tr:nth-of-type(odd) { 
    background: blue; 
    }

    tr:nth-of-type(even) { 
    background: white; 
    }

Answer 2

.rows tr:nth-child(even) {background-color: White}
.rows tr:nth-child(odd) {background-color: blue}

jsFiddleを参照してください

Answer 3

これを実現するには、 n番目の子セレクターを使用できます。

.rows tr:nth-child(even) {background-color: #fff}
.rows tr:nth-child(odd) {background-color: blue}

Answer 4

このようにしてください：-

.rows tr:nth-child(even) {
    background-color: blue;
}
.rows tr:nth-child(odd) {
    background-color: yellow;
}

ご理解いただけるよう、色を変更しました。

ライブデモを参照

Answer 5

nth-child疑似クラスを使用します。

.rows tr:nth-child(odd)
{
    background-color: white;
}
.rows tr:nth-child(even)
{
    background-color: blue;
}​

デモ