html默认折叠连续空格，表格中用 （不间断空格）可稳定保留空格并维持盒模型，兼容性好且不破坏布局。

表格单元格里敲多个空格为什么只显示一个

因为 HTML 默认会折叠连续空白字符，<td>a   b</td> 中的三个普通空格（U+0020）会被合并成一个，和纯文本一样。这不是表格特有行为，而是整个 HTML 渲染规范决定的——空格只是“分隔符”，不是“内容”。所以即使你写 <td>   </td>，只要里面没其他可渲染字符，浏览器仍可能塌陷边框或背景。

  是表格中保留空格最稳的方案

在 <td> 或 <code><th> 里插入 <code> ，它代表 Unicode U+00A0（不间断空格），浏览器把它当“真实内容”处理：

• 单个   就足以让空单元格维持盒模型，边框、背景、padding 全部正常渲染
• 多个   可叠加出视觉宽度，比如     显示为三个等宽空格
• 它不受 border-collapse: collapse 影响，而 empty-cells: show 在该模式下完全失效
• 兼容所有主流浏览器，包括旧版 IE 和 Safari

别用 <pre class="brush:php;toolbar:false;"></pre> 或 white-space 套表格单元格

虽然 <pre class="brush:php;toolbar:false;"></pre> 和 CSS 的 white-space: pre 能保留空格，但在表格中强行套用会破坏布局逻辑：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• <td><pre class="brush:php;toolbar:false;">   </pre></td> 会让内容继承等宽字体、额外行高，且 <pre class="brush:php;toolbar:false;"></pre> 内部换行会撑开行高
• white-space: pre 加在 <td> 上，会使所有内部空格、换行都生效，但容易导致文字不折行溢出，尤其配合 <code>table-layout: fixed 时更难控
• 这些方案语义错位：<pre class="brush:php;toolbar:false;"></pre> 是为代码/日志设计的，不是为表格对齐服务的

需要精确宽度控制时，  搭配 CSS 更可靠

如果三个空格不够宽、五个又太宽，不要堆砌      ：

• 用   占位保结构，再用 letter-spacing 或 padding 微调视觉间距
• 例如：<td style="padding-left: 12px"> </td>，比塞六个   更易维护
• 注意：全角空格（U+3000）虽能显示多个，但宽度是汉字级，不可预测，且在等宽字体下与半宽混排会错位

真正容易被忽略的是：空单元格是否“可见”，取决于有没有浏览器认可的“渲染内容”，  是唯一既轻量、又稳定、又无需额外样式介入的字符级解法。别的方法要么破环表格流，要么依赖特定 CSS 模式，要么引入不可控宽度。

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