调整HTML表格表头文字间距的方法与实用技巧

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 预设基础间距。

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