CSS border-collapse 属性定义了表格边框是共享的（作为单个边框）还是折叠的。
当单元格折叠时，边框样式的值为“inset”，它的行为类似于“groove”，而“outset”的行为类似于“ridge”。
当单元格被分隔时，单元格之间的距离由边框间距属性指定。
| 初始值 | separate |
|---|---|
| 应用于 | 表和内联表元素。 |
| 继承 | 可继承 |
| 可动画的 | 无效 |
| 版本 | CSS2 |
| DOM 语法 | object.style.borderCollapse=“collapse”； |
css border-collapse属性值说明
| 值 | 说明 |
|---|---|
| separate | 每个单元格都有自己的边框，所以是分开的。这是此属性的默认值。 |
| collapse | 单元格共享边框。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
语法
border-collapse: separate | collapse | initial | inherit;
border-collapse属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid #cccccc;
}
thead {
background-color: #1c87c9;
color: #ffffff;
}
th {
height: 50px;
text-align: center;
}
td {
padding: 3px 10px;
}
</style>
</head>
<body>
<h2>Border-collapse 属性示例</h2>
<p>Here the "collapse" value is set for the border-collapse property.</p>
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>
在下面的例子中你可以看到当你使用“border-collapse:separate”时，border-collapse属性可以设置单元格之间的空间，当你使用“border-collapse:collapse”时，border-collapse属性没有效果 .
具有 "separate" 和 "collapse" 值的border-collapse属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
table,
td,
th {
border: 1px solid #ccc;
}
thead {
background-color: #1c87c9;
color: #ffffff;
}
th {
height: 30px;
text-align: center;
}
td {
padding: 3px 10px;
}
#table1 {
border-collapse: separate;
border-spacing: 10px;
}
#table2 {
border-collapse: collapse;
border-spacing: 10px;
}
</style>
</head>
<body>
<h1>Border-collapse 属性示例</h1>
<h2>border-collapse: separate;</h2>
<p>When using the "border-collapse: separate", the border-spacing property can be used to define the space between the cells.</p>
<table id="table1">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
<h2>border-collapse: collapse;</h2>
<p>When using the "border-collapse: collapse", the border-spacing property has no effect.</p>
<table id="table2">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>
日期：2020-06-02 22:14:17 来源：oir作者：oir