table默认有cellspacing和cellpadding，需显式设为0或用css重置：table{border-collapse:collapse}配合td,th{padding:0}，并处理内部元素margin外溢问题。

table 默认有 cellspacing 和 cellpadding，必须显式归零

HTML table 元素自带两个内建属性：cellspacing 控制单元格之间、单元格与边框之间的间隙；cellpadding 控制单元格内容与边框的距离。它们不是 CSS 属性，而是 HTML 属性，且在旧浏览器中默认值不为 0（常见为 2px）。即使你写了 border: none，这些间距依然存在。

解决方式分两类：

• 行内直接写：<table cellspacing="0" cellpadding="0"> <li>CSS 中统一控制（更推荐）：<code>table { border-collapse: collapse; } + td, th { padding: 0; }
• 注意：border-collapse: collapse 不影响 cellpadding，只消除相邻边框间的缝隙；padding 才真正替代 cellpadding

border-collapse: collapse 是清除表格“虚线缝”的关键

即使把 cellspacing 设为 0，某些浏览器（尤其是 Firefox）仍会在相邻 td 边框之间留出 1px 的白缝——这不是 margin，是分离边框模型（separate）下的渲染残留。这时 border-collapse: collapse 才是正解。

它强制浏览器把所有边框合并成一条线，彻底消灭缝隙。但要注意：

• 必须作用于 table 元素本身，对 tr 或 td 设置无效
• 一旦启用，border-spacing 属性才生效（可设为 0），而 cellspacing 就被忽略
• 如果表格里用了 border，记得同步设 border: 1px solid #000，否则可能看起来“没边框”只是因为边框被合并后颜色叠加变淡了

td/th 内部元素的 margin 会撑开行高

很多人发现：明明 cellpadding="0"、padding: 0 都写了，表格行之间还是有空隙。根源往往不在表格本身，而在 td 里塞了 p、h3 或其他块级元素——它们自带上下 margin，会外溢（margin collapse）并撑开整行高度。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载

典型表现：某一行突然比其他行高一截，开发者工具里看 td 高度正常，但内部 p 的 margin-bottom 溢出了。

应对办法：

• 给 td p、td h3 等加 margin: 0
• 或更稳妥地，在表格作用域内重置：table td > * { margin: 0; }
• 避免在 td 里直接放语义化标题标签；如需强调，用 span + class 替代

别碰 * { margin: 0; padding: 0 }，除非你清楚代价

有人图省事，在全局写 * { margin: 0; padding: 0; } 来“一劳永逸”。这会导致：

• input 和 textarea 失去默认内边距，文字贴边难读
• button 的焦点轮廓（outline）消失，键盘用户无法识别当前操作项
• select 在 iOS 上下拉箭头消失
• img 默认 vertical-align 偏移，导致基线错位

真正轻量可控的做法是：只针对表格结构做局部重置 —— table, td, th { margin: 0; padding: 0; border: 0; }，其余元素保持浏览器原生行为。复杂点在于，你得意识到：表格的“默认间距”从来不是单一来源，而是 HTML 属性、CSS 边框模型、内部元素 margin 三者叠加的结果，缺一不可控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！