日期:2014-05-17  浏览次数:20656 次

用CSS为table添加边框

在用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就可以了。