在用CSS给表格定义1像素的边框的时候，是个比较棘手的问题，在定义的时候，很容易把边框定义重复了，很多人问过我这个问题，今天我把我为表格添加的方法给大家，其实方法很简单的，就是逻辑关系比较难懂。 表格里面的单元格都是四条边的，那这单元格里面的四条边怎么定义好呢？我们拿一个只有四个单元格的表格（下面用1，2，3，4来表示四个单元格）来做模型，我是先定义的两个临边，任意两个临边都可以，我这里假定定义的是上边框和右边框。1定义之后是上边和右边有了边框，2定义之后也是上边和右边有了边框，而2同时也有了1的右边框作为它的左边框，所以2已经有了三个边框。我们再看3，当定义了上边和右边之后，那1就有了下边框，后面的4也有了左边框，然后4被定义之后，上面的2就有了下边框，也就是说2的四个边框都定义了，然后我们再观察这四个单元格，你会发现只剩下1的左边框、3的单元格的左边框和下边框及4的下边框没有定义了，而这四个边框正好是表格的左边框和下边框（图片上面红色的边框），所以大家就明白了怎么定义了吧，再给整个的table定义一个左边框和下边框就可以了。于是我们的CSS就出来了：.table_border td{border-top:1px #DDD solid;border-right:1px #DDD solid;}
.table_border{border-bottom:1px #DDD solid;border-left:1px #DDD solid;}
这样定义好之后，在我们以后用的时候只需要在table上面加上table_border这个class就可以了。 上面这个加上border-collapse:collapse;就对了。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Css制作table细线表格</title>
<style type="text/css" media="screen">
<!-- /* PR-CSS */
table {
border-collapse:collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */
border:solid #999; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width:1px 0 0 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
}
table caption {font-size:14px;font-weight:bolder;}
table th,table td {border:solid #999;border-width:0 1px 1px 0;padding:2px;}
tfoot td {text-align:center;}
-->
</style>
</head><body>
<table>
<caption>表格头</caption>
<thead>
<tr><th>名称</th><th>网址</th><th>时间</th></tr>
</thead>
<tfoot>
<tr><td colspan="3">下一页</td></tr>
</tfoot>
<tbody>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
</tbody>
</table>
</body>
</html>
|
