你的位置:首页 > 网页设计

[网页设计]css如何实现只保留内部边框


css如何实现只保留内部边框:

在实际应用中可能有这样的需求,那就是只保留表格的内部边框,可能这样的需求不多,既然有这样的需求,作为程序员就要实现这样的功能,下面分享一段能够实现此功能的代码实例。

代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><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></head><body><table> <tr>  <td>蚂蚁部落一</td>  <td>蚂蚁部落二</td>  <td>蚂蚁部落三</td>  <td>蚂蚁部落四</td>  <td>蚂蚁部落五</td>  <td class="lastCol">蚂蚁部落六</td> </tr> <tr>  <td>蚂蚁部落一</td>  <td>蚂蚁部落二</td>  <td>蚂蚁部落三</td>  <td>蚂蚁部落四</td>  <td>蚂蚁部落五</td>  <td class="lastCol">蚂蚁部落六</td> </tr> <tr class="lastrow">  <td>蚂蚁部落一</td>  <td>蚂蚁部落二</td>  <td>蚂蚁部落三</td>  <td>蚂蚁部落四</td>  <td>蚂蚁部落五</td>  <td class="lastCol">蚂蚁部落六</td> </tr></table></body></html>

以上代码实现了我们的要求,代码比较简单,这里就不多介绍了,如有任何问题可以跟帖留言。

相关阅读:

1.border-collapse属性可以参阅CSS的border-collapse属性一章节。

2.border属性可以参阅css的border属性简单介绍一章节。

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0615/4368.html

最原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13597