HTML5表格空隙主要源于默认CSS渲染，需用border-collapse:collapse消除单元格间隙，重置td/th的padding和table的margin，并注意white-space、vertical-align及col标签影响。
HTML5 表格内空格太多，通常不是因为写了多余的空格字符，而是浏览器默认渲染时对 <table>、<td>、<th> 的边框、内边距、外边距和空白处理共同导致的视觉“空隙”。直接删 HTML 换行缩进或加 基本无效，得从 CSS 渲染层下手。
用 border-collapse: collapse 消除单元格间缝隙
这是最常见也最有效的第一步。默认情况下，表格使用 border-collapse: separate，单元格之间会保留 border-spacing（默认为 2px），看起来像“空格太多”。设为 collapse 后，相邻边框合并，缝隙消失。
table {
border-collapse: collapse;
}- 必须作用于
<table>元素本身，对<tr>或<td>设置无效 - 设为
collapse后，border-spacing和empty-cells属性将被忽略 - 若需保留部分边框（如只显示外边框），可配合
border单独控制
检查并重置 padding 和 margin
即使边框合并了，<td> 和 <th> 默认仍有 padding: 1px 6px（各浏览器略有差异），内容离边框太远也会显得“空”。<table> 自身也可能有默认 margin（尤其在某些 CMS 或框架中）。
table {
margin: 0;
}
td, th {
padding: 0;
}- 不要只清
padding而忽略margin，特别是当表格嵌套在<p>或其他块级元素中时 - 若需保留一点呼吸感，用
padding: 2px 4px这类小值，避免用em或百分比——易受字体影响失准 -
vertical-align默认是middle，但若单元格内是行内元素或图片，可能产生底部空隙，可临时加vertical-align: top排查
警惕 white-space 和换行符带来的“隐形空格”
HTML 源码中 <td>内容</td> 若写成多行（如回车缩进），且父容器未禁用空白符处理，浏览器会把换行+缩进解析为一个空格。这在 <td> 内含纯文本时尤其明显。
立即学习“前端免费学习笔记（深入）”；
td {
white-space: nowrap; /* 强制不换行，同时吞掉首尾空格 */
}-
white-space: nowrap是最干脆的解法，适合数字、ID、短标签等无需折行的内容 - 若需折行，改用
white-space: normal+word-break: break-all，但注意中文下效果不如break-word - 更彻底的方式是删 HTML 源码中的换行和缩进（即写成
<td>内容</td><td>内容</td>连写），但可维护性差，不推荐
避免用 <colgroup> 或 <col> 意外撑宽列
<col> 标签若设置了 width（尤其是固定像素值），而实际内容很窄，就会强制留白；若用了 span 属性又没对齐 <tr> 结构，还可能引发列错位，间接放大空隙感。
- 优先用 CSS 控制列宽：
table { table-layout: fixed; }+col { width: 80px; } - 删掉无明确用途的
<colgroup>—— 现代开发中它极少必要 - 检查 DevTools 的 Layout 面板，看每列实际宽度是否被意外拉伸（常因某单元格内容过长或含
<pre>类元素）
真正难调的往往不是单一属性，而是多个默认样式叠加：比如 border-collapse: separate + padding: 6px + white-space: normal + <col width="200">，四者一起才让表格“虚胖”。逐项关掉再开，比凭感觉调更可靠。
