通过设置 border-collapse: collapse 可使表格外边框与单元格边框合并渲染，从而确保 table 的边框样式（如颜色、粗细）优先显示，避免 td 边框意外覆盖或干扰表格整体边框效果。
通过设置 `border-collapse: collapse` 可使表格外边框与单元格边框合并渲染，从而确保 `table` 的边框样式（如颜色、粗细）优先显示，避免 `td` 边框意外覆盖或干扰表格整体边框效果。
在 HTML 表格中，默认的边框模型是 border-collapse: separate —— 即表格（table）、行（tr）、单元格（td/th）的边框各自独立绘制，彼此分离。此时即使你为 table 设置了 border 并加上 !important，其视觉表现仍可能被相邻 td 的边框“遮盖”或“叠加”，尤其在边框宽度、颜色不一致时，会形成双线、错位或颜色混叠，导致外边框“失效”。
✅ 正确解法是启用 边框合并模型：
.table_1 {
border: 2px solid black; /* 外边框：黑色、2px */
border-collapse: collapse; /* 关键！合并所有边框 */
}
.td_table {
border: 1px solid #B5B5B5; /* 单元格边框：灰色、1px */
padding: 8px;
}
⚠️ 注意：
border-collapse: collapse会让相邻边框（如table与td、td与td）自动合并为一条边框，并遵循 CSS 边框冲突解决规则：当多条边框重叠时，宽度更大者优先；宽度相同时，样式更“实”者（如solid>dashed）优先；样式相同时，颜色按层叠上下文顺序决定（但通常以父元素或后声明者为准）。因此，只要table的边框宽度 ≥td，且使用collapse，外边框就能稳定呈现。
完整示例：
| 内容1 | 内容2 | 内容3 | 内容4 |
? 补充建议：
- 避免滥用
!important：它无法解决边框渲染逻辑问题，仅影响优先级，而border-collapse才是语义正确的解决方案； - 若需保留内部分隔线但强调外边框，可单独为
table添加border，并为第一行/最后一行的td设置border-top/border-bottom，配合collapse精准控制； - 始终为
table显式设置border-collapse，不要依赖浏览器默认值（不同浏览器可能有差异）。
掌握 border-collapse 是构建专业、可控表格样式的基石。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
