css border属性的研究

时间：2011-05-06 来源：terminatorheart

今天测试了一下css border属性对表格边框控制的兼容性，在此分享一下结果：

<!DOCTYPE>
<html>
<head>
<title>test11</title>
</head>
<body>
<table>
        <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
        </tr>
        <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
        </tr>
        <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
        </tr>
        <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
        </tr>
</table>
</body>
</html>
/*css 代码1 给td定义边框属性值，tr和table不定义，结果IE6,7,8，firefox，chrome全部正常显示*/
<style type="text/css">
td{
        
        width:40px;
        border:solid #000000 1px;
}
table{border-collapse:collapse;}
</style>
/*css代码2 考虑到有时候有边框左右不显示的需求，于是只给tr标签的左右边框值设为none经测试IE6，7table表格完全没有了*/
<style type="text/css">
td{
        
        width:40px;
}
tr{
        border-top:solid #000000 1px;
        border-bottom:solid #000000 1px;
        border-left-style:none;
        border-right-style:none;
}
table{border-collapse:collapse;}
</style>
/*修改css2的代码，把tr改为td，其他不动，IE6,7不再出现问题*/
<style type="text/css">
td{
        
        width:40px;
}
td{　
        border-top:solid #000000 1px;
        border-bottom:solid #000000 1px;
        border-left-style:none;
        border-right-style:none;
}
table{border-collapse:collapse;}
</style>

针对更为普遍的控制情况，即要求表格周围边框不显示，而内部边框都显示，我们可以给周围的一圈表格对应的td标签分别加上一个钩子（分上下左右共四个），用来区别内部的td单元，然后对这一部分td单元分别应用border的对应边的none值。当然如果表格单元比较多的话，这个方法并不好