border-collapse 必须作用于 table 元素，对 td/tr 无效；启用 collapse 后需配合 box-sizing: border-box 确保 padding 可见，否则盒模型计算错乱导致列宽崩坏、内容换行。
border-collapse 必须写在 table 上，否则盒模型边框计算完全失效
你给 td 或 tr 写 border-collapse: collapse，浏览器会静默忽略——它只对 table 元素生效。此时所有单元格边框仍按默认 separate 模式渲染，border-width 和 padding 会叠加计算，导致实际尺寸远超预期（比如 width: 100px + 左右 border: 1px + 左右 padding: 8px = 118px），表格列宽崩坏、内容换行、响应式错位全由此起。
常见错误现象：
-
computed面板里border-collapse显示为separate，哪怕你写了collapse - Ant Design/Bootstrap 等框架重置了
table的border-collapse，你的规则被覆盖 - 父容器设了
display: block，table失去表格语义，border-collapse直接退化
border-collapse: collapse 下，border 不再独立占位，但盒模型仍受 box-sizing 控制
启用 collapse 后，相邻边框合并为一条线，视觉上“少了一层边框”，但 td 自身的 border 声明仍参与布局计算——前提是它的 box-sizing 是 content-box（默认值）。这时你设 width: 100px + padding: 12px + border: 1px，内容区只剩 74px 宽，文本会被压缩或换行。
真正稳的做法：
-
td, th { box-sizing: border-box; padding: 12px; }—— 让width包含内边距和边框 - 避免只给
table设box-sizing，它不影响子元素，td才是承载padding的主体 - 若项目已用
* { box-sizing: border-box; }，仍建议显式加到td, th，因部分老版 reset 会重置该规则
边框合并后，border-width 不是相加而是“竞选”，盒模型尺寸计算逻辑随之改变
collapse 模式下，td 和 th 的相邻边框不叠加，而是按“宽度 > 样式 > 声明顺序”选出胜出者。这意味着：table 的总宽度 ≠ 所有 td 宽度之和 + 两倍外边框；内部共享边框只算一次。如果你还按 separate 逻辑写 width，列宽就会错位。
典型冲突场景：
-
table-layout: fixed+collapse：列宽由col或第一行td决定，但合并后的边框不占额外空间，若没预留边框宽度，内容会被挤压 - 某列
td设了border-left: 2px，相邻列没设左边界 → 交界处只显示 2px，但右侧列的padding可能被误判为“可压缩区域” - 打印或 PDF 导出时，某些引擎对
collapse边框的宽度取舍逻辑不同，导致粗细不一致
想让 padding 可见，border-collapse 和 box-sizing 必须同时就位
写了 td { padding: 12px; } 却没反应？不是 CSS 被忽略，而是 border-collapse 和 box-sizing 缺一不可。前者解决边框视觉重叠掩盖 padding，后者防止 padding 被盒模型“吃掉”。两者缺一，padding 就只是代码里的摆设。
最容易被忽略的细节：
-
table没设border（哪怕border: 1px solid transparent），collapse模式可能退化为“无边框区域”，padding视觉权重下降 - 某些 UI 框架把
table的border-style设为hidden，比none更彻底，连宽度都不渲染，collapse彻底失效 - 响应式中配合
visibility: collapse隐藏列时，padding会被重新分配，需加min-width: 0防止内容撑开列宽反向压缩padding
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
