CSS - border-spacing 属性



border-spacing 设置表格中单元格之间的距离,假设表格是使用分隔边框模型呈现的。

可能的值

  • length − 任何长度单位。如果声明了两个值,则第一个值适用于沿水平轴的间距,第二个值适用于垂直轴。

适用于

显示 table 或 inline-table 的元素。

DOM 语法


object.style.borderSpacing = "2px";

以下是显示边框间距用法的示例 -


<html>
<head>
<style>
	 	table.one {
	 	 	 border-collapse:separate;
	 	 	 width:400px;
	 	 	 border-spacing:10px;
	 	}
	 	table.two {
	 	 	 border-collapse:separate;
	 	 	 width:400px;
	 	 	 border-spacing:10px 50px;
	 	}
</style>
</head>
<body>
	 	<h2>border-spacing</h2>
	 	<div>
	 	 	 	 	<table class = "one" border = "1">
	 	 	 	 	<caption>Separate Border Example with border-spacing</caption>
	 	 	 	 	<tr><td> Cell A Collapse Example</td></tr>
	 	 	 	 	<tr><td> Cell B Collapse Example</td></tr>
	 	 	 </table>
	 	</div>
	 	<div style="padding-top: 10px;">
	 	 	 <table class = "two" border = "1">
	 	 	 	 	<caption>Separate Border Example with border-spacing</caption>
	 	 	 	 	<tr><td> Cell A Separate Example</td></tr>
	 	 	 	 	<tr><td> Cell B Separate Example</td></tr>
	 	 	 </table>
	 	</div> 		
</body>
</html>