table 隔行变色

htmlcss

解决方案 »

  1.   


    <!doctype html>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .tab tr{background: #f1f1f1;}
            .tab tr:nth-child(even){background: #ccc;}
        </style>
    </head>
    <body>
    <table width="400" class="tab">
        <tr>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
        </tr>
    </table>
    </body>
    </html>
      

  2.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Css3实现表格隔行变色或隔列变色</title>
    <style>
    body{padding:0;margin:0;font:normal 12px/24px "\5FAE\8F6F\96C5\9ED1";color:#444;}
    table{width:500px;border:0;margin:100px auto 0;text-align:center;border-collapse:collapse;border-spacing:0;}
    table th{background:#0090D7;font-weight:normal;line-height:30px;font-size:14px;color:#FFF;}
    table tr:nth-child(odd){background:#68c;}
    table td:nth-child(even){color:#C00;}
    /*table tr:nth-child(5){background:#73B1E0;color:#FFF;}*/
    table tr:hover{background:#73B1E0;color:#FFF;}
    table td,table th{border:1px solid #EEE;}
    </style>
    </head>
    <body>
    <table>
      <tr>
        <th>xHTML+CSS</th>
        <th>HTML5+CSS3</th>
        <th>Javascript</th>
        <th>jQurey</th>
      </tr>
      <tr>
        <td>xHTML+CSS</td>
        <td>HTML5+CSS3</td>
        <td>Javascript</td>
        <td>jQurey</td>
      </tr>
      <tr>
        <td>xHTML+CSS</td>
        <td>HTML5+CSS3</td>
        <td>Javascript</td>
        <td>jQurey</td>
      </tr>
      <tr>
        <td>xHTML+CSS</td>
        <td>HTML5+CSS3</td>
        <td>Javascript</td>
        <td>jQurey</td>
      </tr>
      <tr>
        <td>xHTML+CSS</td>
        <td>HTML5+CSS3</td>
        <td>Javascript</td>
        <td>jQurey</td>
      </tr>
      <tr>
        <td>xHTML+CSS</td>
        <td>HTML5+CSS3</td>
        <td>Javascript</td>
        <td>jQurey</td>
      </tr>
      <tr>
        <td>xHTML+CSS</td>
        <td>HTML5+CSS3</td>
        <td>Javascript</td>
        <td>jQurey</td>
      </tr>
    </table>
    </body>
    </html>
      

  3.   

    <style type="text/css">
    <!--
    tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}
    -->
    </style>
      

  4.   

    可以使用css3中的选择器，像一楼的
      

  5.   

    嗯   伪类选择器的知识点 http://www.cnblogs.com/kiracn/archive/2009/12/17/1626742.html