码农人生

css border属性的研究

今天测试了一下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{
	height:20px;
	width:40px;
	border:solid #000000 1px;
}
table{border-collapse:collapse;}
</style>
/*css代码2 考虑到有时候有边框左右不显示的需求，于是只给tr标签的左右边框值设为none经测试IE6，7table表格完全没有了*/
<style type="text/css">
td{
	height:20px;
	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{
	height:20px;
	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值。当然如果表格单元比较多的话，这个方法并不好

posted on 2011-05-06 21:26  terminatorheart  阅读(960)  评论(0)    收藏  举报