理CSS中border-collapse:collapse的作用
在HTML中，表格是展示结构化数据的常用元素，但默认情况下，表格的边框呈现“分开”状态——相邻单元格的边框会叠加成双重线条，单元格之间也会有明显间隙。这种默认样式往往不简洁的设计需求，而`border-collapse:collapse`正是决这一问题的关键CSS属性。
border-collapse:collapse的核心作用
`border-collapse`是CSS中专门为`
`元素设计的属性，用于控制表格边框的合并规则。当将其值设置为`collapse`时，会产生两个直接效果：
1. 合并相邻单元格的边框
默认状态下`border-collapse:separate`，每个单元格`
`或` | `的边框都是独立的，相邻单元格的边框会形成“双线条”比如两个1px的边框叠加成2px。而设置`collapse`后，相邻单元格的边框会合并为一条线，论单元格各自的边框样式如何，最终只显示一条统一的边框。
2. 消除单元格之间的间距
默认情况下，表格单元格之间会有一定间距由`border-spacing`属性控制，默认值通常为2px。但`border-collapse:collapse`会使`border-spacing`属性失效，直接消除单元格之间的所有间隙，让表格结构更紧凑。
代码对比：默认与collapse的效果差异
通过简单代码可以直观看到`border-collapse:collapse`的作用：
1. 默认情况border-collapse:separate
```html
```
此时，相邻单元格的边框是分开的，单元格之间有3px的间距，表格看起来“松散”且有双重边框。
2. 设置border-collapse:collapse后的效果
```html
```
此时，相邻单元格的边框合并为一条1px的实线，单元格之间没有任何间隙，表格看起来更简洁、整齐。
意事项
`border-collapse:collapse`仅对``元素有效，不适用于用`div`、`flex`或`grid`模拟的“表格布局”。此外，当表格同时设置了`border`表格本身的边框和单元格边框时，`collapse`会将表格边框与单元格边框合并，避免出现“边框叠加”的问题。
`border-collapse:collapse`的价值在于，它通过合并边框和消除间隙，让表格从“松散的块结构”变成“紧凑的整体”。论是数据报表、表单表格还是导航菜单，只要需要简洁的边框效果，`border-collapse:collapse`都是最直接的决方案。
|
