html表格中空格被压缩，用 可精确控制空格数量；大段文本宜用white-space: pre-wrap；避免全角空格和包裹，注意border-collapse对空格显示的影响。
表格里直接敲空格没用，浏览器会压缩成一个
HTML规范对所有元素都执行空白折叠（whitespace collapsing），<td> 和 <code><th> 也不例外。你在单元格里写 <code><td>姓名 年龄</td>（中间塞了多个空格），最终渲染出来仍是“姓名 年龄”——只保留一个空格。
用 是最简单、最可控的方案
在 <td> 内部插入 HTML 实体 <code> ，每个对应一个不可断行的空格，不会被压缩，也不会触发换行。适合需要精确控制空格数量的场景，比如对齐字段、模拟缩进或分隔关键词。
- 想显示 4 个空格？写
- 数字和单位之间防折行？写
100 px而不是100 px - 注意：
white-space: pre-wrap 更适合大段带空格/换行的文本
如果单元格内容本身是代码片段、日志或用户输入的富格式文本（含多空格+换行），直接给 <td> 加 CSS 更省事：
<pre class="brush:php;toolbar:false;">td {
white-space: pre-wrap;
}</pre>
<p>这个值保留所有空格和换行，同时允许自动折行（不溢出容器），比 <code>pre 更实用。但要注意：
- 它会影响整个单元格内联内容的换行行为，比如
<span></span>里的换行也会被保留 - 不能解决
<td> 标签之间或属性值里的空格问题（那是 HTML 解析阶段的事） <li>若表格有固定宽度且内容超长，<code>pre-wrap可能导致单元格撑高，需配合overflow: hidden或text-overflow控制
别用全角空格或 <pre class="brush:php;toolbar:false;"></pre> 套表格单元格
全角空格（如 ` `）虽能绕过空白折叠，但本质是 Unicode 字符，宽度依赖字体，不同设备下可能错位；而把 <td> 包进 <code><pre class="brush:php;toolbar:false;"></pre> 会导致样式重置（如默认等宽字体、外边距、垂直对齐异常），破坏表格布局流。
真正容易被忽略的是：表格结构本身会干扰空格视觉效果——border-collapse: collapse 下相邻单元格的 padding 和 border 可能掩盖空格间距，调试时建议临时加 border: 1px solid red 看清真实边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
