效果图
DOM+CSS
<html> <head> <meta charset="UTF-8"> <title>美化表格</title> <style type="text/css"> *{ margin: 0;padding: 0; } body{ padding: 40px 100px; } .demo{ width: 600px; margin: 40px auto; font-family: "trebuchet ms" , "lucida sans typewriter" , Arial; font-size: 14px; color: #444; } table{ *border-collapse: collapse;/*IE*/ border-spacing: 0; width: 100%; } .bordered{ border: solid #CCCCCC 1px; border-radius: 6px; box-shadow: 0 1px 1px #CCCCCC; } .bordered tr{ -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .bordered .highlight, .bordered tr:hover{ background: #fbf8e9; } .bordered td, .bordered th{ border-left: 1px solid #ccc; border-top: 1px solid #CCCCCC; padding: 10px; text-align: left; } .bordered th{ /*表格表头添加渐变背景色*/ background-color: #dce9fc; background-image: linear-gradient(top, #ebf3fc, #dec9f9); background-image: -webkit-gradient(linear , left, top, left, bottom, from(#ebf3fc), to(#dec9f9)); background-image: -moz-linear-gradient(top, #ebf3fc, #dec9f9); background-image: -ms-linear-gradient(top, #ebf3fc, #dec9f9); background-image: -webkit-linear-gradient(top, #ebf3fc, #dec9f9); background-image: -o-linear-gradient(top, #ebf3fc, #dec9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ebf3fc, endColorstr=#dec9f9); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ebf3fc, endColorstr=#dec9f9)"; box-shadow: 0 1px 0 rgba(255,255,255,.8); border-top: none; text-shadow: 0 1px 0 rgba(255,255,255,.5); } /*去除表格每一行的左边框*/ .bordered td:first-child, .bordered th:first-child{ border-left: none; } .bordered th:first-child{ border-radius: 6px 0 0 0; } .bordered th:last-child{ border-radius: 0 6px 0 0; } .bordered tr:last-child td:first-child{ border-radius: 0 0 0 6px; } .bordered tr:last-child td:last-child{ border-radius: 0 0 6px 0; } /*斑马线表格*/ .zebra td,.zebra th{ padding: 10px; border-bottom: 1px solid #f2f2f2; } .zebra .alertnate, .zebra tr:nth-child(even){ background: #f5f5f5; box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset; } .zebra th{ text-align: left; background-color: #eee; border-bottom: 1px solid #CCCCCC; background-image: linear-gradient(top, #f5f5f5, #eee); background-image: -webkit-gradient(linear , left, top, left, bottom, from(#f5f5f5), to(#eee)); background-image: -moz-linear-gradient(top, #f5f5f5, #eee); background-image: -ms-linear-gradient(top, #f5f5f5, #eee); background-image: -webkit-linear-gradient(top, #f5f5f5, #eee); background-image: -o-linear-gradient(top, #f5f5f5, #eee); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f5f5f5, endColorstr=#eee); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f5f5f5, endColorstr=#eee)"; box-shadow: 0 1px 0 rgba(255,255,255,.8); border-top: none; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .zebra td:first-child, .zebra th:first-child{ border-left: none; } .zebra th:first-child{ border-radius: 6px 0 0 0; } .zebra th:last-child{ border-radius: 0 6px 0 0; } .zebra tr:last-child td:first-child{ border-radius: 0 0 0 6px; } .zebra tr:last-child td:last-child{ border-radius: 0 0 6px 0; } </style> </head> <body> <table class="demo bordered"> <tr> <th>#</th> <th>name</th> <th>age</th> <th>job</th> <th>OT</th> </tr> <tr> <td>1</td> <td>john</td> <td>22</td> <td>nnnnnn</td> <td>Dxxxxxata</td> </tr> <tr> <td>2</td> <td>lilei</td> <td>11</td> <td>dd</td> <td>Dabbbbbta</td> </tr> <tr> <td>3</td> <td>lily</td> <td>22</td> <td>vbf</td> <td>kkkkkkk</td> </tr> </table> <table class="demo zebra"> <tr> <th>#</th> <th>name</th> <th>age</th> <th>job</th> <th>OT</th> </tr> <tr> <td>1</td> <td>john</td> <td>22</td> <td>nnnnnn</td> <td>Dxxxxxata</td> </tr> <tr> <td>2</td> <td>lilei</td> <td>11</td> <td>dd</td> <td>Dabbbbbta</td> </tr> <tr> <td>3</td> <td>lily</td> <td>22</td> <td>vbf</td> <td>kkkkkkk</td> </tr> </table> </body> </html>