用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: 1 px #DDD solid ; border-right: 1 px #DDD solid ; }
.table _ border { border-bottom: 1 px #DDD solid ; border-left: 1 px #DDD solid ; }

这样定义好之后，在我们以后用的时候只需要在table上面加上table_border这个class就可以了。