Question

I have a table like below image styled even/odd rows via css .
Problem : on Google Chrome browser when refresh the page the even/odd rows is different and when mouse over on page or on tablehead even/odd places change .
Can be see at: http://jsfiddle.net/uSDNg/

When Open/refresh the page :

when move mouse on page or hover the tablehead :(rows even/odd styles change place)

CSS Codes :

#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 Codes :

<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>

Where’s the problem ?

Answer 1

Change your CSS to:

#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 */