HTML表格表头部分的文字间距怎么调整（技巧分享）
作者：袖梨
2026-07-13
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 预设基础间距
