废话少说,先看效果,如果不是你想要的,你可以撤了~
这些都是css控制的,然后我们看下样式:
- table tr:nth-child(odd){background:#F4F4F4;}
- table td:nth-child(even){color:#C00;}
- table tr:nth-child(5){background:#73B1E0;color:#FFF;}
分别选择为:奇数行、偶数列、第五行,下面是完整代码:
- <!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:#F4F4F4;}
- 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>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。