HTML表格表头文字间距调整技巧

说到表头文字间距，letter-spacing 确实是唯一靠谱的 CSS 属性。但直接扔在 th 上？往往不灵——字体继承、内联子元素、Safari 渲染舍入误差，随便一个都能让它失效。稳妥的做法是：用 span 把文字包起来，单独设置 letter-spacing、display 和 font-variant-ligatures，别和 word-spacing 混用，单位统一用 px。

letter-spacing 这个属性，确实是控制表头文字间距的唯一可靠选择，但直接写在 th 上，很容易被字体、继承或内联元素干扰，所以必须针对性包裹或重置。

为什么给 th 直接设 letter-spacing 有时没反应

你可能会发现，明明加了 letter-spacing: 2px，中文标题却纹丝不动，甚至英文单词被拉得离谱。原因主要有三个：

• th 继承了父级（比如 table 或 body）的字体设置，而某些字体（如 Noto Sans CJK、PingFang SC）默认字距偏紧，letter-spacing 叠加后视觉变化不明显。
• 如果 th 里嵌了 或图标字体（如 ），这些子元素会继承并应用同一间距，导致图标错位或文字断开。
• 部分浏览器（特别是 Safari iOS 16+）对小字号（≤14px）+ 正 letter-spacing 渲染有微小舍入误差，需要配合 transform: translateZ(0) 强制触发 GPU 渲染才能稳定。

th 内文字单独调间距的稳妥写法

别指望全局样式或粗暴覆盖，而是用最小作用域精准控制：

• 把要调间距的文字用 包裹，例如：用户编号
• 在 CSS 中只对该 span 设 letter-spacing，同时显式重置 display 和 font-variant-ligatures 防止连字干扰：

  `.tight-title { letter-spacing: -0.5px; display: inline-block; font-variant-ligatures: none; }`

• 避免用 em 或 % 单位——中文字体尺寸变化时，em 会随 font-size 缩放，反而让“收紧”效果失效；统一用 px。

和 word-spacing 混用会出什么问题

有人想“中英文混合标题统一拉开”，顺手加了 word-spacing: 4px，结果发现中文完全没变，英文单词却裂开了（比如 “User Info” 变成 “User Info”）。这是因为：

• word-spacing 只在空格、制表符或换行符分隔的“词”之间生效；中文无空格分词，浏览器不识别“用户”“编号”为两个词。
• 若标题里夹着英文或数字（如 “订单ID：ORD-2026”），word-spacing 会强行在冒号后、短横线处加空隙，破坏语义分组。
• 和 letter-spacing 同时存在时，两者数值相加——比如 letter-spacing: 1px + word-spacing: 3px，实际字符间可能达到 4px，远超预期。

移动端真机测试最容易漏掉的点

开发时在 Chrome 桌面端看着正常，一上 iPhone 就发现字距忽大忽小，尤其在折叠屏或动态字体缩放开启时。关键要检查：

• 是否用了 viewport 的 text-size-adjust: auto（iOS 默认启用）——它会动态调整文字渲染密度，间接影响 letter-spacing 视觉表现；可加 text-size-adjust: none 锁定，但需确保可访问性不降级。
• 是否在 @media (prefers-reduced-motion: reduce) 下遗漏了间距重置；部分系统动画降级策略会抑制字体微调。
• WebFont 加载期间 fallback 字体（如 system-ui）的默认 letter-spacing 与目标字体差异极大，建议用 @font-face 的 font-display: optional + 内联 style 预设基础间距。

真正难的不是加一个像素，而是让这个像素在所有字体、所有设备、所有加载状态下都稳定出现。别指望一次设置全局生效，表头文字间距必须当作独立排版单元来对待。