text-underline-offset 在 table 元素上无效，仅对带 text-decoration: underline 的文本级元素生效；需作用于 td 内的内联元素（如 span、a）或改 display 为 inline-block，否则应使用 border-bottom 替代。
text-underline-offset 在 table 元素上根本不起作用
它只对带有 text-decoration: underline 的**文本级元素**生效，而 <table>、<code><tr>、<code><td> 默认不是文本装饰目标——浏览器压根不渲染下划线，自然也无视 <code>text-underline-offset。
常见错误现象：给 td 写了 text-underline-offset: 2px，但下划线没动，甚至根本没出现。
- 先确认是否真加了
text-decoration: underline—— 没这句，text-underline-offset就是废属性 -
td默认是display: table-cell，不是inline或inline-block，而text-decoration在非内联元素上行为不可靠（尤其跨浏览器） - 直接给
table或tr设该属性，完全无效：它们不承载文本流，也不参与文本装饰渲染
真正能调下划线距离的只有 td/td 里的内联内容
想调表格单元格里文字的下划线位置，必须把 text-decoration 和 text-underline-offset 落在**实际显示文字的元素上**，比如 td 里的 span、a，或显式设 td { display: inline; }（但会破坏表格布局）。
- 推荐写法：
td a { text-decoration: underline; text-underline-offset: 2px; } - 如果整个
td都要下划线，得先让它“变成文本容器”：td { display: inline-block; } td::after { content: ""; display: block; border-bottom: 1px solid currentColor; margin-top: -1px; }—— 这样才能绕过原生限制 - 别对
th直接设text-underline-offset，除非它里面套了span并显式加了text-decoration
用 border-bottom 替代是表格场景最稳的选择
表格里用原生 text-decoration 本就容易出问题：换行错位、多行 td 下划线断开、Safari ≤15.3 静默忽略 text-underline-offset。真要控制距离，border-bottom + padding-bottom 或 margin-bottom 更可控。
- 示例：
td { border-bottom: 1px solid #007bff; padding-bottom: 3px; }—— 距离 =padding-bottom值 - 若需响应式，用
calc(0.2em + 1px)替代固定 px，避免小字号时太挤 - 注意：设
border-bottom后，line-height会影响视觉间距，建议同步检查line-height: 1.4是否导致下划线被“顶高”
混用 text-decoration-thickness 时 offset 必须重调
表格中若用 text-decoration-thickness: 2px 加粗下划线，不调 text-underline-offset 会让线“压进 g/y 的 descender 区”，尤其在小字号表格里特别糊。
- 基础组合：
td a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } - 别信
auto：在表格单元格里，text-underline-offset: auto会退回到字体默认 baseline，和加粗线不匹配 - 安卓 WebView（尤其旧版）对这套组合支持极差，同一表格在不同设备上可能忽高忽低——这时 border-bottom 是唯一可靠方案
text-decoration 路线，后者直接用 border 更省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
