CSS - border-collapse 属性_CSS 菜鸟教程

border-collapse 确定在呈现表时使用的边界模型。

可能的值

collapse - 边界折叠以形成单个边界。两个相邻的单元格将共享一个边框。
separate − 边界是分开的。每个单元格都有自己的边框，并且这些边框都不会与表中的其他单元格共享。

适用于

显示 table 或 inline-table 的元素。

DOM 语法


object.style.borderCollapse = "Any of the two values";

例

以下是显示两个值的示例 -


<html>
<head>
<style>
	 	div {
	 	 	 padding: 15px;
	 	}

	 	table.one {border-collapse:collapse;}
	 	table.two {border-collapse:separate;}
	 	
	 	td.a {	
	 	 	 border-style:dotted;	
	 	 	 border-width:3px;	
	 	 	 border-color:#000000;	
	 	 	 padding: 10px;
	 	 	 background-color: aquamarine;
	 	}
	 	td.b {
	 	 	 border-style:solid;	
	 	 	 border-width:3px;	
	 	 	 border-color:#333333;	
	 	 	 padding:10px;
	 	 	 background-color: thistle;
	 	}
</style>
</head>
<body>
	 	<div>
	 	<table class = "one">
	 	 	 <caption>Collapse Border Example</caption>
	 	 	 <tr><td class = "a"> Cell A Collapse Example</td></tr>
	 	 	 <tr><td class = "b"> Cell B Collapse Example</td></tr>
	 	</table>
	 	</div>
	 	<div>
	 	<table class = "two">
	 	 	 <caption>Separate Border Example</caption>
	 	 	 <tr><td class = "a"> Cell A Separate Example</td></tr>
	 	 	 <tr><td class = "b"> Cell B Separate Example</td></tr>
	 	</table>
	 	</div>
</body>
</html>

<< CSS - border-bottom-width 属性 CSS - border-color 属性 >>