纯css table奇偶行背景不同

àì夳堔傛蜴生んèń 2021-06-24 13:58 393阅读 0赞

##     ##

*  ***css代码***
    
    <style type="text/css">
    
    .table-striped tbody tr:nth-child(even) td,
    
    .table-striped tbody tr:nth-child(even) th \{background-color:\#D4FFFF;\}
    
      
    
    
    .table-striped tbody tr:nth-child(odd) td,
    
    .table-striped tbody tr:nth-child(odd) th \{background-color:\#D4BFFF;\}
    
    </style>
 *  ***html代码***
    
    <table class="table-striped"  border="0">
    
      <tr>
    
         <td>首行首列</td>
    
         <td>首行</td>
    
        <td>首行</td>
    
         <td>首行</td>
    
         <td>首行</td>
    
        <td>首行</td>
    
       </tr>
    
       <tr>
    
         <td>行1首列</td>
    
         <td>行1</td>
    
        <td>行1</td>
    
         <td>行1</td>
    
         <td>行1</td>
    
         <td>行1</td>
    
       </tr>
    
       <tr>
    
        <td>行2首列</td>
    
        <td>行2</td>
    
         <td>行2</td>
    
         <td>行2</td>
    
         <td>行2</td>
    
        <td>行2</td>
    
       </tr>
    
       <tr>
    
         <td>行3首列</td>
    
       <td>行3</td>
    
         <td>行3</td>
    
         <td>行3</td>
    
         <td>行3</td>
    
         <td>行3</td>
    
       </tr>
    
       <tr>
    
         <td>行4首列</td>
    
         <td>行4</td>
    
         <td>行4</td>
    
         <td>行4</td>
    
         <td>行4</td>
    
         <td>行4</td>
    
      </tr>
    
       <tr>
    
         <td>行5首列</td>
    
         <td>行5</td>
    
         <td>行5</td>
    
         <td>行5</td>
    
         <td>行5</td>
    
        <td>行5</td>
    
      </tr>
    
    </table>