text-decoration-skip 在表格中完全无效，已被废弃；真正有效的是 text-decoration-skip-ink，但需满足 span 包裹、字体含 opentype 数据、无 display: inline-block 或 text-decoration: none 等苛刻条件。
text-decoration-skip 在表格中完全无效——它早已被废弃，且对 th 或 td 里的下划线毫无作用。 想靠它让表头下划线避开“g”“y”等字母底部？白费劲。真正能起效的，只有 text-decoration-skip-ink，但必须满足一连串苛刻条件。
为什么 text-decoration-skip 在表格里根本不起作用
这个属性早在 Chrome 64+ 就被移除，Firefox 从未实现，Safari 仅在极旧版本（th/td）本身是块级容器，内部文本渲染常受 line-height、padding、vertical-align 干扰，进一步切断了本就不存在的 skip 逻辑链。
- 写了
text-decoration-skip: ink或text-decoration-skip: objects→ 浏览器直接忽略，控制台无报错，样式查不到生效痕迹 - 试图在
table或thead上设该属性 → 完全不传递到单元格文本，因为它是非继承属性，且已废弃 - 误以为它能控制“只跳过中文标点”或“避开顿号、句号” → 属性本身设计目标就是拉丁字母 descender，CJK 字符从来不在它的处理范围内
text-decoration-skip-ink: auto 在表格中能否用？怎么用才可能生效
能用，但非常脆弱。它只在满足以下全部条件时，才可能让表头下划线智能避开字母下降笔画：
- 必须显式声明
text-decoration: underline（不能只靠链接默认行为或继承） - 必须作用于**实际包裹文字的内联元素**，比如
th > span，而不是直接写在th上（th是 table-cell，浏览器对其 text-decoration 渲染逻辑不一致） - 字体必须含 OpenType 轮廓数据：系统字体（如 Inter、Segoe UI、SF Pro）通常 OK；Web 字体需确认包含
glyf或CFF表，否则跳过区域为空白 - 父级不能设
text-decoration: none，也不能用display: inline-block包裹文字——这两者会中断 skip-ink 的渲染路径
示例有效写法：
th span {
text-decoration: underline;
text-decoration-skip-ink: auto;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
}
对应 HTML：<th><span>用户名</span></th>
表格下划线避让更可靠的替代方案
别赌 skip-ink 在表格里稳定工作。真要解决“下划线切穿 g/y/p”或“压住中文末尾标点”，优先选这些实操路径：
- 用
text-underline-offset主动抬高下划线位置：设text-underline-offset: 0.18em（比字号小一点），比依赖跳过更可控；注意 Firefox 不支持该属性，需降级为border-bottom - 对关键表头文字单独包裹
span，并配合::after伪元素绘制下划线：可完全掌控位置、粗细、颜色，且不受字体轮廓限制 - 避免在小字号（≤14px）
th中强求跳过效果——此时下划线物理空间不足，即使 skip-ink 生效，视觉上仍像“断开”或“偏移异常” - 如果表格需打印或 PDF 导出，彻底放弃所有 text-decoration 变体：它们在多数 PDF 引擎（如 wkhtmltopdf、Puppeteer 默认配置）中不支持 skip-ink 和 offset，一律回退到
border-bottom模拟
真正容易被忽略的是：表格单元格的 padding 和 line-height 会悄悄覆盖 text-underline-offset 的计算基准，而 skip-ink 对这种干扰毫无抵抗力。调样式前，先用 DevTools 检查 computed 值里 text-underline-offset 是否真的被应用，而不是只看 CSS 规则有没有写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
