码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-07-24 22:29:31      阅读:542      评论:0      收藏:0      [点我收藏+]

标签:

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

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

标签:

原文地址:http://www.cnblogs.com/xiaofinder/p/4674677.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!