直接在th上使用text-decoration: underline即可实现下划线，无需修改display；若需偏移可用text-underline-offset，兼容性不足时建议fallback至border-bottom方案。
table th 里加下划线，直接写 text-decoration: underline 就行
不需要额外包裹、不用改 display、也不用担心换行断线——th 默认是表格单元格，属于「行内块级行为」，text-decoration 能正常渲染整段文字下的连续下划线。
常见错误是给 th 加了 display: block 或 float: left，导致文本变成单行块，此时下划线仍存在但可能被截断或位置异常；若真需要居中/换行控制，请保留默认 display 表现。
实操建议：
- 最简写法：
<th style="text-decoration: underline">姓名</th> - 推荐复用类：
.header-underline { text-decoration: underline; }，然后<th class="header-underline">邮箱</th> - 别只设
text-decoration-line: underline——孤立使用会被浏览器忽略，必须走text-decoration复合属性
想让下划线离文字远一点？用 text-underline-offset
默认下划线紧贴文字基线，尤其在有 descender（如 g、y、q）的字体里容易重叠。加个偏移量更清爽。
注意这个属性不支持所有旧浏览器（Safari 15.4+、Chrome 89+、Firefox 70+），但现代项目基本可放心用。
示例：
.th-underline {
text-decoration: underline;
text-underline-offset: 4px;
}
要点：
-
text-underline-offset值可以是px、em、rem，也支持auto（由字体度量自动计算） - 它不会影响
border-bottom，所以和自定义边框方案不冲突 - 如果同时用了
text-decoration-thickness，offset 是从粗细中心算起，不是从文字底边
a 标签在 th 里时，下划线容易被覆盖
当表头里嵌了链接，比如 <th>@#@#@#@#@#@#@#@#@#@0</th>，浏览器会优先应用 a 的默认样式（蓝色 + 下划线），而 th 上设的 text-decoration 不会继承到 a 内部——因为 text-decoration 不继承。
结果就是：只看到链接自带下划线，th 的样式完全没生效。
解决方式只有两条路：
- 把
text-decoration直接加在a上：<a style="text-decoration: underline">操作</a> - 统一清掉链接默认样式再重置：
a { text-decoration: none; } a:hover { text-decoration: underline; }
千万别指望靠 th a { text-decoration: inherit } ——inherit 对 text-decoration 无效，该属性天生不继承。
用 border-bottom 替代 text-decoration 的场景
当你要精确控制下划线长度（比如只划到文字末尾，不撑满整个 th 宽度）、对齐方式（比如右对齐时下划线也要右对齐）、或叠加动画（hover 时变色/伸长），text-decoration 就力不从心了。
这时候 border-bottom 更可控：
.th-border {
border-bottom: 1px solid #666;
padding-bottom: 2px; /* 留点间距，避免贴死 */
}
注意点：
-
border-bottom会参与盒模型计算，记得调padding-bottom避免文字“坐”在边框上 - 它不随字体大小缩放，要响应式就得配合
em或clamp() - 无法实现
wavy或dotted这类装饰线样式，除非用background-image模拟
真正难处理的是跨浏览器对 text-underline-offset 和 text-decoration-thickness 的支持差异，尤其是 Safari 对 offset 的解析有时偏保守。如果项目要兼容 macOS 旧版 Safari，建议 fallback 到 border-bottom 方案，并用 @supports 包一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
