HTML表格布局怎么消除单元格空隙-html教程-PHP中文网

border-collapse: collapse必须写在table元素上才生效，写在td、tr或div上会被浏览器静默忽略；它通过宽度>样式>声明顺序三重优先级合并边框，是唯一真正消除单元格空隙的方式。

html表格布局怎么消除单元格空隙

border-collapse: collapse 是唯一能真正物理消除单元格空隙的方式，其他方法只是视觉掩盖或治标不治本。

为什么 `border-collapse: collapse` 必须写在 `table` 上

浏览器只认 table 元素上的 border-collapse 声明，写在 td、tr 或外层 div 上会被静默忽略——这是 90% “加了没反应”的根源。框架如 Ant Design 或 Bootstrap 往往默认注入 table { border-collapse: separate; }，必须用 DevTools 的 Computed 面板确认最终计算值，不能只看源码。

临时验证可用 !important，但长期应提高选择器权重，例如：.my-table { border-collapse: collapse; } +

。
border-spacing: 0 为什么经常失效
border-spacing 只在 border-collapse: separate 下起作用；一旦计算值是 collapse，该属性直接被规范忽略（DevTools 里可能标为 “invalid”）。常见干扰包括：

全局 CSS 重置（如 * { margin: 0; padding: 0; }）不会影响它，但框架常自带 border-spacing: 0 1px


table 被设为 display: block 或 inline-block 后，border-spacing 完全失效
双值写法必须都为零：border-spacing: 0 0，写成 0% 或 0em 不合法

边框合并后怎么避免双线、白缝或错位
border-collapse: collapse 不是简单“取平均”，相邻边框按三重规则竞争：

											
												
												
													使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
													使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
												
												下载
												
											
										

宽度最大者胜出（2px > 1px）
样式更实者胜出（solid > dashed > dotted）
声明顺序靠后者胜出（CSS 文件中后写的、权重更高的规则）

所以务必统一 th 和 td 的边框定义：th, td { border: 1px solid #ccc; }。别给 tr 设边框（它在 collapse 模式下基本无效），想突出某列就操作 td:last-child；border: none 不参与合并，要用单边控制，例如：td { border-top: 1px solid #000; border-right: none; }。
那些容易被忽略的“伪空隙”来源
即使 border-collapse 正确生效，仍可能看到缝隙，原因常不在表格本身：


table 父容器有 font-size: 0，而 HTML 换行或空格字符被渲染为微小间隙（尤其在表格底部/右侧）

td 内嵌了带默认 margin 的元素（如 p、h2），它们的外边距会撑开单元格高度
用了 outline 或 box-shadow，制造出类似空隙的视觉效果
移动端 WebView 缩放时短暂闪现缝隙——不是 bug，是渲染延迟，无需修复

最稳妥的做法：先确保 table { border-collapse: collapse; } 生效，再逐项排查边框统一性、内嵌元素 margin、以及父级 font-size 或 outline 干扰。