唯一靠谱的方式是用letter-spacing，它对中英文字符均匀生效；word-spacing仅在真实空格处起作用，中文无空格时完全无效，强行插空格会破坏可访问性和响应式。

直接给 td 或 th 设 letter-spacing

想让某个单元格里的文字更松或更紧，唯一靠谱的方式是用 letter-spacing。它对中英文都生效，每个字符之间均匀加/减间距，不受空格有无影响。
比如中文标题“订单状态”要拉开一点，写：

td.order-status { letter-spacing: 0.06em; }

注意单位推荐用 em 或 px，避免用 %（不合法）或负得太多（-0.04em 以上中文易粘连）。

为什么 word-spacing 在单个单元格里基本没用

word-spacing 只在真实空白符（ASCII 空格、制表符、换行）位置起作用：

• <td>User Name</td> → word-spacing: 8px 能在 “User” 和 “Name” 之间加空隙
• <td>用户名</td> → 整段无空格，浏览器视为一个“词”，word-spacing 完全不触发
• 强行在 HTML 里插空格（如 <td>用 户 名</td>）会破坏可访问性、复制体验和响应式换行

所以别为单个单元格折腾 word-spacing，它不是为此设计的。

如何只影响特定单元格，不波及其他元素

letter-spacing 会继承，容易污染子内容（比如单元格里嵌了个 .badge 小标签，结果也被拉宽）。安全做法是：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 给目标单元格加明确类名，如 <td class="tight-text">ID-2026</td>
• 样式里用类选择器限定范围：

  .tight-text { letter-spacing: -0.02em; }

• 如果单元格内有需保持默认密度的子元素，显式重置：

  .tight-text .icon { letter-spacing: normal; }

别直接写 td { letter-spacing: ... }，除非你真想全局改。

border-collapse: collapse 会影响字间距的视觉表现吗

不影响 letter-spacing 的计算和渲染，但它会让单元格边框合并，导致文字离左/上边框看起来更近——这时人眼容易误判为“字太挤”。实际解决方式不是调字间距，而是：

• 确认 td 有足够 padding（比如 padding: 8px 12px）
• 检查 line-height 是否过小（line-height: 1.4 通常比盲目加大 padding 更稳）
• 若用了 vertical-align: top，文字会顶到上边框，此时加 padding-top 比调 letter-spacing 更直接

字间距是微观控制，边距和行高才是宏观疏密感的主力。

立即学习“前端免费学习笔记（深入）”；