CSS改变表格行的背景颜色

<table cellpadding="5" cellspacing="0" border="1">

   <caption>Family Statistics</caption>

   

   <thead>

    <tr>

      <th>Name</th>

      <th>Age</th>

      <th>Sex</th>

      <th>Hair Color</th>

    </tr>

   </thead>

   

   <tbody>

     <tr class="odd">

       <td>1</td>

       <td>2</td>

       <td>3</td>

       <td>4</td>

     </tr>

     <tr class="even">

       <td>1</td>

       <td>2</td>

       <td>3</td>

       <td>4</td>

     </tr>

     <tr class="odd">

       <td>1</td>

       <td>2</td>

       <td>3</td>

       <td>4</td>

     </tr>

     <tr class="even">

       <td>1</td>

       <td>2</td>

       <td>3</td>

       <td>4</td>

     </tr>

     <tr class="odd">

       <td>1</td>

       <td>2</td>

       <td>3</td>

       <td>4</td>

     </tr>

     <tr class="even">

       <td>1</td>

       <td>2</td>

       <td>3</td>

       <td>4</td>

     </tr>

     <tr class="odd">

       <td>1</td>

       <td>2</td>

       <td>3</td>

       <td>4</td>

     </tr>

     <tr class="even">

       <td>1</td>

       <td>2</td>

       <td>3</td>

       <td>4</td>

     </tr>

   </tbody>

   </table>

CSS：

-----------------

table

{

    background-color: #fff;

    border:1px solid #ddd;

    empty-cells:show;

    font-size:90%;

    margin:0 0 20px 0;

    padding:4px;

    text-align:left;

    width:300px;

}

table caption

{

    color:#777;

    margin:0 0 5px 0;

    padding:0;

    text-align:center;

    text-transform:uppercase;

}

    

table thead th

{   

    border:0;

    border-bottom:1px solid #ddd;

    color:#777;

    font-size:90%;

    padding:3px 0;

    margin:0 0 5px 0;

    text-align:left;

}

table tbody tr.odd

{

    background-color:#f7f7f7;

}

table tbody tr.even

{

    background-color:#fff;

}

table tbody tr:hover

{

    background-color:#ffe08e;

}

table tbody td

{   

    color:#888;

    padding:2px;

    border:0;

}

table tbody tr:hover td

{

    color:#444;

}