<style type="text/css"> /*蓝表格*/ .table1{border:1px solid #4472c4;border-collapse:collapse;width:100%;margin-top:10px;margin-left:auto;margin-right:auto;} .table1 tr{border:1px solid #4472c4;} .table1 th{padding:5px;font-size:14px;background:#4472c4;color:#FFF;text-align:center;} .table1 td{padding:5px 10px;font-size:14px;} /*灰表格*/ .table2{border:1px solid #c4c4c4;border-collapse:collapse;width:100%;margin-top:10px;margin-left:auto;margin-right:auto;} .table2 tr{border:1px solid #c4c4c4;} .table2 th{padding:5px;font-size:14px;background:#c4c4c4;color:#333;text-align:center;} .table2 td{padding:5px 10px;font-size:14px;} /*无边框表格*/ .table0{border:0;border-collapse:collapse;width:100%;margin-top:10px;margin-left:auto;margin-right:auto;} .table0 th{padding:5px;font-size:14px;text-align:center;} .table0 td{padding:5px 10px;font-size:14px;} </style> <table class="table1"> <tr><th>ID</th><th>名称</th><th>时间</th><th>操作</th></tr> <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr> <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr> </table> <table class="table2"> <tr><th>ID</th><th>名称</th><th>时间</th><th>操作</th></tr> <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr> <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr> </table> <table class="table0"> <tr><th>ID</th><th>名称</th><th>时间</th><th>操作</th></tr> <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr> <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr> </table>
一个有边框的蓝表格:
<style type="text/css"> /*蓝表格*/ .table1{border-collapse:collapse;width:50%;margin-top:10px;text-align:center;} .table1 th{border:1px solid #4472c4;padding:5px;font-size:14px;background:#4472c4;color:#FFF;} .table1 td{border:1px solid #4472c4;} </style> <table class="table1"> <tr><th>ID</th><th>名称</th><th>时间</th><th>操作</th></tr> <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr> <tr><td>10005</td><td>啊啊啊啊</td><td>2014-9-18</td><td>启用</td></tr> </table>
...