border-collapse: collapse必须设在table上才生效，仅设在td/th无效；它解决边框双线问题但不解决响应式，小屏需配合overflow-x: auto或媒体查询。
为什么 border-collapse: collapse 有时还不起作用
很多人加了 border-collapse: collapse 就以为万事大吉，结果发现 <th> 和 <code><td> 之间仍有细缝、行高异常、或单元格内容“撑开”了视觉间隙。根本原因不是边框没合并，而是：
- 表格内部的文本、<code>img、div 等元素自带默认 margin 或 line-height
- font-size: 0 在父级未设时，行内元素（如空格、换行）会生成不可见间隙
- 某些浏览器对 <table> 的用户代理样式仍保留 <code>border-spacing 或 border
实操建议：
- 用浏览器开发者工具选中任意 <td>，在「Computed」面板里查 <code>border-spacing、margin、line-height 是否为 0
- 对表格整体加 font-size: 0，再对 <td> 单独设 <code>font-size: 14px（防空白字符占位）
- 若单元格里有 p、h3 等块级元素，必须显式重置：p { margin: 0; }
用 cellspacing 和 cellpadding 还管用吗
管用，但只适用于 HTML 属性写法，且优先级低于 CSS。现代项目应避免混用，尤其当 CSS 已控制布局时，HTML 属性可能被忽略或覆盖。
常见误区：
- 把 cellpadding="0" 当成“消除单元格内容与边框距离”的万能解——它只影响内边距，不解决 border-collapse 失效问题
- 在已有 CSS 的表格上还写 cellspacing="0"，纯属冗余，甚至可能干扰 flex/grid 布局嵌套
- cellspacing 在 strict DOCTYPE 下已被废弃，仅在 quirks mode 下可靠
建议统一走 CSS 路线：
- 用 border-collapse: collapse 替代 cellspacing
- 用 padding: 0 替代 cellpadding
- 若需兼容老 IE（cellspacing="0" 属性
如何彻底清除 <th> 和 <code><td> 之间的视觉缝隙<p>缝隙往往来自三处叠加：边框分离、背景色对比、伪元素或 outline。不能只盯一个属性。
</p>
<p>必须同步处理：
- 表格层级：<code>table { border-collapse: collapse; border-spacing: 0; }
- 单元格层级：th, td { border: none; padding: 0; margin: 0; }
- 内容层级：若用了 background-color 区分列，确保相邻 <td> 无 gap；若用 <code>outline 做调试线，上线前删掉或设为 outline: none
- 额外兜底：table { border-style: hidden; }（比 none 更强，能压制 Firefox 默认边框）
表格里放图片或图标时为啥还有白边
这是最隐蔽也最常被忽略的一点：<img> 默认是 inline 元素，会响应基线对齐（baseline），下方自动留出约 3–4px 空隙，看起来像单元格下边有白边。
解决方法只有两个有效：
- 给 img 加 display: block
- 或给 td 加 vertical-align: top（注意：这个值必须写在 td 上，写在 table 或 tr 无效）
- 不要用 font-size: 0 治标——它会让文字消失，且对 SVG 不生效
如果表格里混用了 img、svg、span，建议统一设 td > * { vertical-align: top; }，避免逐个调整。
真正麻烦的从来不是“怎么写”，而是“写了之后哪一行还在偷偷加空”。查间隙，永远从开发者工具的盒模型开始，而不是反复改 border-collapse。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
