使用CSS3实现表格隔行/隔列变色

转载，原文链接：http://www.qdker.com/archives/103.html

废话少说，先看效果，如果不是你想要的，你可以撤了~
CSS3表格隔行隔列变色
这些都是css控制的，然后我们看下样式：

  1. table tr:nth-child(odd){background:#F4F4F4;}
  2. table td:nth-child(even){color:#C00;}
  3. table tr:nth-child(5){background:#73B1E0;color:#FFF;}

分别选择为：奇数行、偶数列、第五行，下面是完整代码：

    1.  <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8" />
    5. <title>Css3实现表格隔行变色或隔列变色</title>
    6. <style>
    7. body{padding:0;margin:0;font:normal 12px/24px "\5FAE\8F6F\96C5\9ED1";color:#444;}
    8. table{width:500px;border:0;margin:100px auto 0;text-align:center;border-collapse:collapse;border-spacing:0;}
    9. table th{background:#0090D7;font-weight:normal;line-height:30px;font-size:14px;color:#FFF;}
    10. table tr:nth-child(odd){background:#F4F4F4;}
    11. table td:nth-child(even){color:#C00;}
    12. table tr:nth-child(5){background:#73B1E0;color:#FFF;}
    13. table tr:hover{background:#73B1E0;color:#FFF;}
    14. table td,table th{border:1px solid #EEE;}
    15. </style>
    16. </head>
    17. <body>
    18. <table>
    19. <tr>
    20. <th>xHTML+CSS</th>
    21. <th>HTML5+CSS3</th>
    22. <th>Javascript</th>
    23. <th>jQurey</th>
    24. </tr>
    25. <tr>
    26. <td>xHTML+CSS</td>
    27. <td>HTML5+CSS3</td>
    28. <td>Javascript</td>
    29. <td>jQurey</td>
    30. </tr>
    31. <tr>
    32. <td>xHTML+CSS</td>
    33. <td>HTML5+CSS3</td>
    34. <td>Javascript</td>
    35. <td>jQurey</td>
    36. </tr>
    37. <tr>
    38. <td>xHTML+CSS</td>
    39. <td>HTML5+CSS3</td>
    40. <td>Javascript</td>
    41. <td>jQurey</td>
    42. </tr>
    43. <tr>
    44. <td>xHTML+CSS</td>
    45. <td>HTML5+CSS3</td>
    46. <td>Javascript</td>
    47. <td>jQurey</td>
    48. </tr>
    49. <tr>
    50. <td>xHTML+CSS</td>
    51. <td>HTML5+CSS3</td>
    52. <td>Javascript</td>
    53. <td>jQurey</td>
    54. </tr>
    55. <tr>
    56. <td>xHTML+CSS</td>
    57. <td>HTML5+CSS3</td>
    58. <td>Javascript</td>
    59. <td>jQurey</td>
    60. </tr>
    61. </table>
    62. </body>
    63. </html>
posted @ 2017-03-31 14:43  叨叨的蜗牛  阅读(281)  评论(0)  编辑  收藏  举报