📅 最后修改于: 2023-12-03 15:00:04.521000 🧑 作者: Mango
CSS border-collapse 属性定义表格边框的折叠方式。
当表格的 border-collapse 属性被设置为 collapse 时，相邻单元格的边框将会折叠在一起，从而显示为单个边框。当该属性被设置为 separate 时，单元格的边框不会折叠。
border-collapse: collapse|separate|initial|inherit;
属性值：
collapse：相邻单元格边框折叠在一起。默认值。separate：单元格边框不折叠。initial：设置为默认值 collapse。inherit：从父元素继承该属性。以下实例展示了 border-collapse 属性的不同值：
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Smith</td>
</tr>
</table>
<br>
<table style="border-collapse: separate;">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Smith</td>
</tr>
</table>
</body>
</html>
在上面的实例中，第一个表格使用了默认值 collapse，相邻单元格的边框被折叠在一起，显示为单个边框。
第二个表格的 border-collapse 属性被设置为 separate，单元格的边框不会折叠。
border-collapse 属性用于控制表格边框的折叠方式。将其设置为 collapse 可以减少表格中边框线的数量，使其更加紧凑和整齐。而将其设置为 separate 可以在每个单元格周围显示单独的边框线。
使用合适的折叠方式，可以使表格设计更加美观，从而提高网页的视觉体验。