border-collapse: collapse 必须写在 table 元素上，写在 th 或 td 上无效；它使 border-spacing 和 empty-cells 失效，内边框合并需配合统一 border 和 padding 控制间距。
border-collapse: collapse 必须写在 table 上
很多人把 border-collapse: collapse 写在 th 或 td 上，结果完全没效果——它只对 table 元素生效，写错位置等于白配。
常见错误现象包括：
- 表格内部边框仍是双线、发虚或错位
- 明明加了
border-spacing: 0却无效（因为collapse下该属性被忽略） - 响应式下表格收缩变形，但查了半天发现是
table没设width: 100%或min-width: fit-content
正确做法是三步缺一不可：
table { border-collapse: collapse; }-
table { border: 1px solid #333; }（外边框，可选但建议设） -
th, td { border: 1px solid #333; }（内边框，值必须和外边框一致）
为什么加了 border 还是双线？
浏览器默认用 border-collapse: separate，每个 th 和 td 都独立画自己的边框。左边单元格的右边框 + 右边单元格的左边框 = 看起来像两条线叠在一起，中间还夹着默认 border-spacing: 2px 的空白缝。
典型误操作：
- 只给
table设border: 1px solid #000→ 结果只有外框，内部没线 - 用了过时的
border="1"属性 → Chrome/Firefox 渲染出粗细不均、颜色不可控的断续边框 - 给
th和td都加了border，却漏掉border-collapse: collapse→ 边框依然双线、错位
只要漏掉 border-collapse: collapse，其他边框设置基本白忙。
collapse 后 padding 是唯一控制“疏密感”的方式
border-collapse: collapse 会让 border-spacing 和 empty-cells 失效，想调节单元格间距，只能靠 padding。
实操建议：
- 通用留白：
th, td { padding: 8px 12px; } - 某列更宽松：单独给对应
td加style="padding-left: 16px;" - 空单元格要不要显示边框？
empty-cells在collapse下不起作用，统一由border控制
注意：如果 th 边框是 2px 而 td 是 1px，合并后交界线会变成 2px，视觉断裂明显。
响应式场景下最容易被跳过的一步
border-collapse: collapse 解决的是边框渲染逻辑，不是响应式本身。小屏上表格照样会横向溢出——它不会自动换行或隐藏列。
真要适配移动端，得额外加：
-
table { display: block; overflow-x: auto; }包裹滚动 - 媒体查询里把
th, td改成display: block重排结构（需配合data-label补语义） - 别忘了
table { width: 100%; }或min-width: fit-content;，否则 collapse 后表格可能意外收缩、内容挤压变形
边框画得再干净，宽度失控就全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
