表格标题letter-spacing失效主因是继承覆盖或优先级不足，需检查Computed面板、避免table全局设置、中英文混排应分span控制，小字号禁用负值，响应式推荐em单位并真机测试。
表格标题用 letter-spacing 拉不开？先确认是不是被继承或覆盖了
表格标题（<th>）本身不特殊，但常因父级 <table> 或 <thead> 设了全局 letter-spacing，导致你单独给 <th> 加值反而失效。更常见的是 CSS 优先级低，被后面同选择器的规则覆盖。打开 DevTools 的 Computed 面板，看 letter-spacing 是否显示为 strikethrough（划掉），或者值是 normal 却没生效——说明它被重置了。
解决办法很简单：
- 明确写
th { letter-spacing: 0.04em !important; }临时验证是否是优先级问题（上线前务必移除!important） - 检查是否有
table, th, td { letter-spacing: normal; }这类兜底规则，把它挪到更具体的选择器下 - 避免在
<table>元素上直接设letter-spacing，否则所有<td>和<th>都会继承，数字、单位符号（如 “kg”、“%”）容易被撑开变形
<th> 里中英文混排时，一个值根本不够用
比如表头是 “用户ID｜注册时间｜状态”，其中 “ID” 和 “时间” 视觉密度差异极大：设 letter-spacing: 0.05em，英文变松垮，中文却 barely visible；设 0.02em，中文又显闷。这不是调得不够细，而是必须拆开控制。
推荐做法是显式包裹：
立即学习“前端免费学习笔记（深入）”；
<th><span class="lang-en">User ID</span><span class="lang-zh">注册时间</span></th>
再配 CSS：
.lang-en { letter-spacing: 0.06em; }
.lang-zh { letter-spacing: 0.02em; }
/* 防止 span 继承父级 th 的其他 spacing */
th span { display: inline-block; }别依赖 :lang(en) —— 它只对带 lang="en" 属性的元素生效，而 HTML 里很少给内联英文加这个属性，实际几乎不触发。
小字号表头慎用负值，iOS Safari 会粘连
很多设计稿要求 “紧凑型表头”，于是有人直接写 th { letter-spacing: -0.5px; }。12–14px 字号下，这在 Chrome 看着还行，但在 iOS Safari（尤其 iOS 17.x）里，“口”“田”“目”类汉字笔画极易重叠，甚至 “已” 变成 “巳”。这不是 bug，是 WebKit 渲染引擎对小字号负间距的舍入策略不同。
安全做法：
- 中文表头负值上限控制在
-0.02em（约 -0.24px @12px），且必须搭配line-height: 1.5以上防上下行粘连 - 如果目标是视觉紧凑，优先换字体：用支持
font-stretch: condensed的可变字体（如 Inter Variable、HarmonyOS Sans），比硬塞负letter-spacing更稳定 - 真机测试不能跳过——模拟器无法复现 iOS Safari 对 sub-pixel spacing 的渲染抖动
响应式表头怎么让 letter-spacing 自适应缩放
PC 端表头用 1.2px 刚好，移动端缩到 14px 字体后，同样 1.2px 就几乎不可见；反过来，用无单位值如 0.1，会被解析为 0.1px，多数浏览器舍入为 0。
正确单位组合：
- 桌面端大表头（≥18px）：用
px微调，如letter-spacing: 1.2px，但别超1.8px，否则窄列会溢出 - 移动端小表头（≤14px）：统一用
em，如th { letter-spacing: 0.035em; }，它随font-size等比缩放 - 禁用
%—— CSS 规范不支持，浏览器直接忽略；也别用rem，除非你确保:root的font-size在所有断点下都稳定
真正难的不是写出来，是同一套 letter-spacing 值在 Chrome Android、Safari iOS、Edge Windows 上渲染出肉眼可见的密度差——字体回退链、subpixel rendering 开关、甚至系统缩放设置都会干扰。调完别急着提交，拿三台真机横竖屏各扫一遍。
