HTML表格表头部分的文字间距怎么调整（技巧分享）

letter-spacing 是唯一可靠控制表头文字间距的 CSS 属性，但直接设在 th 上常因字体继承、内联子元素干扰或 Safari 渲染舍入误差而失效；稳妥做法是用 span 包裹文字并单独设置 letter-spacing、display 和 font-variant-ligatures，避免混用 word-spacing 且统一使用 px 单位。

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

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

常见现象是加了 letter-spacing: 2px，但中文标题看起来毫无变化，甚至英文单词被撑开得离谱。原因有三：

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

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

不要依赖全局样式或粗暴覆盖，而是用最小作用域精准控制：

• 把要调间距的文字用 <span></span> 包裹，例如：<th><span class="tight-title">用户编号</span></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 预设基础间距

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