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