https://blog.youkuaiyun.com/semizhou/article/details/19902077
- <html>
- <head>
- <meta charset="GBK" />
- <title>Css3实现表格隔行变色或隔列变色</title>
- <style>
- .tableStyle {
- border-collapse:collapse;
- border-spacing:0;
- }
- .tableStyle tr {
- background-color: expression((this.rowIndex % 2 == 0) ? "#F4F4F4" : "#FFF" );
- }
- .tableStyle tr:hover {
- background:#73B1E0;
- color:#FFF;
- }
- .tableStyle td {
- border:1px solid #EEE;
- }
- .tableStyle th {
- border:1px solid #EEE;
- background:#0090D7;font-weight:normal;line-height:30px;font-size:14px;color:#FFF;
- }
- </style>
- </head>
- <body>
- <table class="tableStyle">
- <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>