Table默认是有外边框,有内边框的,那么如何通过css样式简单实现Table没有外边框,只有内边框呢?eGg七七世界-网站建设|UI设计|人资系统|二次开发
效果图实现,如下:eGg七七世界-网站建设|UI设计|人资系统|二次开发
eGg七七世界-网站建设|UI设计|人资系统|二次开发
CSS代码如下:
<style type="text/css">
table{
border-collapse: collapse;
border: 0px solid #999;
}
table td {
border-top: 0;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 0;
}
table tr.lastrow td {
border-bottom: 0;
}
table tr td.lastCol {
border-right: 0;
}
</style>eGg七七世界-网站建设|UI设计|人资系统|二次开发
table代码如下:
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>籍贯</td>
<td>出生年月</td>
<td>学历</td>
<td class="lastCol">外语程度</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td class="lastCol">666</td>
</tr>
<tr class="lastrow">
<td>211</td>
<td>322</td>
<td>433</td>
<td>544</td>
<td>655</td>
<td class="lastCol">766</td>
</tr>
</table>eGg七七世界-网站建设|UI设计|人资系统|二次开发
PS:我们设置table的边框是0,table中td只有右边框和下边框,此时距离实现table只有内边框没有外边框已经一半了,每一列的最后一个td我们要设置border-right:0,表格的最后一行tr要设置border-bottom:0,此时实现表格没有外边框,只有内边框。eGg七七世界-网站建设|UI设计|人资系统|二次开发