实现的效果:
html代码:
<table width="900" cellpadding="0" cellspacing="0" class="ct"> <thead> <tr> <td>用户标识</td> <td>用户姓名</td> <td>用户年龄</td> <td>用户性别</td> <td>用户代码</td> <td>用户操作</td> </tr> </thead> <tr> <td>1</td> <td>张三</td> <td>23</td> <td>男</td> <td>001</td> <td>添加 删除</td> </tr> <tr class="odd_ct"> <td>1</td> <td>张三</td> <td>23</td> <td>男</td> <td>001</td> <td>添加 删除</td> </tr> <tr> <td>1</td> <td>张三</td> <td>23</td> <td>男</td> <td>001</td> <td>添加 删除</td> </tr> <tr class="odd_ct"> <td>1</td> <td>张三</td> <td>23</td> <td>男</td> <td>001</td> <td>添加 删除</td> </tr> <tr> <td>1</td> <td>张三</td> <td>23</td> <td>男</td> <td>001</td> <td>添加 删除</td> </tr> <tr class="odd_ct"> <td>1</td> <td>张三</td> <td>23</td> <td>男</td> <td>001</td> <td>添加 删除</td> </tr> <tr> <td>1</td> <td>张三</td> <td>23</td> <td>男</td> <td>001</td> <td>添加 删除</td> </tr> </table>
Css代码:
<style type="text/css" media="screen"> /*清除页面标签默认带的padding和margin*/ * { padding: 0px; margin: 0px; font-size: 12px; } body { padding: 50px; } /*显示table的左边框和下边框*/ table.ct { border-left: 1px solid #000; border-bottom: 1px solid #000; } /*显示table中的td的右边框和上边框,以及文本的居中*/ table.ct td { border-right: 1px solid #000; border-top: 1px solid #000; height: 30px; text-align: center; } /*设置table中的标题,让其如内容不一样*/ table.ct thead { background: #711; color: #fff; } /*设置隔行显示颜色*/ tr.odd_ct { background: #ccc; } </style>