1

css を介して偶数/奇数行のスタイルを設定した以下の画像のようなテーブルがあります。
問題 : Google Chrome ブラウザでページを更新すると偶数行と奇数行が異なり、マウスをページ上またはテーブルヘッドに合わせると偶数行と奇数行が変わります。
で見ることができます: http://jsfiddle.net/uSDNg/

ページを開く/更新する場合:
ここに画像の説明を入力

ページ上でマウスを移動するか、テーブルヘッドをホバーすると:(行の偶数/奇数スタイルが場所を変更します)
ここに画像の説明を入力

CSS コード :

#table_box
{
    width:100%;
    font-size: 11px;
    border-collapse: collapse;
    text-align:center;
}
#table_box th
{
    padding:7px;
    color: #292929;
}
#table_box td
{
    padding: 4px 0 4px 0;
    color: #464646;
    border:1px solid #cecece;
}
.maintb th{
    background-color:#174797;
    color:#FFF!important;
}
#table_box tr:nth-child(odd) td { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) td { background-color:#f0f0f0} /* even*/
#table_box tr:hover td { background-color:#fffbae; } /* hovering */

HTML コード : 

<table id="table_box" class="maintb">
<tr>
    <th>سال</th>
    <th>ماه</th>
</tr>
    <tr>
        <td>1391</td>
        <td>آذر</td>
    </tr>
        <tr>
        <td>1391</td>
        <td>آبان</td>
    </tr>
        <tr>
        <td>1391</td>
        <td>مهر</td>
    </tr>
</table>

問題はどこですか？

4

1 に答える 1

3

CSS を次のように変更します。

#table_box tr:nth-child(odd)  { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) { background-color:#f0f0f0} /* even*/
#table_box tr:hover { background-color:#fffbae; } /* hovering */
于 2012-12-16T07:05:23.247 に答える