text-decoration-style 在 table 表头中根本不起作用；它仅在 text-decoration-line 明确设为 underline 且元素支持装饰渲染时生效，而 默认无装饰上下文，故波浪线不可见，须改用伪元素（如 ::after + 渐变或 SVG）模拟才稳定跨浏览器显示。
text-decoration-style 在 table 表头中根本不起作用
直接告诉你结论：text-decoration-style 无法用于 <th> 或 <code><td> 元素的文本下划线样式控制——它只对 <code>text-decoration-line 有效，而表格单元格默认没有装饰线，所以设了也看不见。
常见错误是这么写：
<th style="text-decoration-line: underline; text-decoration-style: wavy;">姓名</th>
结果发现波浪线没出现。原因很实在：浏览器对 <th> 的 <code>text-decoration 渲染受限制，尤其在表格布局（table-layout: fixed 或边框折叠模式）下，装饰线常被裁剪或忽略。
真正能显示波浪线表头的替代方案
必须绕过原生 text-decoration，用伪元素模拟波浪线。这是目前唯一稳定、跨浏览器生效的方式：
立即学习“前端免费学习笔记（深入）”；
- 给
<th> 设置 <code>position: relative - 用
::after伪元素绘制 SVG 波浪路径或 CSS 渐变波纹 - 避免用
border-bottom，它只能是直线
一个轻量可行示例：
<th class="wavy-header">年龄</th>
.wavy-header {
position: relative;
padding-bottom: 8px;
}
.wavy-header::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 8px;
background:
radial-gradient(circle at 50% 50%, transparent 2px, #000 2px) 0 0 / 8px 8px,
linear-gradient(to right, #000, #000);
background-repeat: repeat-x;
}
这个技巧本质是用重复的圆形渐变拼出视觉波浪，比 SVG 更轻、兼容性更好（支持到 IE11+）。
为什么不用 text-underline-offset + text-decoration-color
即使你加上 text-underline-offset 和 text-decoration-color，只要 text-decoration-style: wavy 没生效，整条线就还是实线或虚线。关键点在于：
-
text-decoration-style只在text-decoration-line明确为underline且元素支持该装饰时才解析 <th> 在多数 UA 样式中不继承 <code>text-decoration渲染上下文（比如没有行内格式化上下文）- Chrome 115+ 对表格单元格的波浪线支持仍不稳定，Firefox 完全不渲染
- 注意 vertical-align 对齐，否则会和表格其他单元格错位
如果必须用原生 text-decoration，只能换容器
想省事又坚持用原生属性？那就别把文字放在 <th> 里直接设样式。改成：
<ul><li>把表头文字包进 <code><span></span> 或 <div>
<li>给这个内联元素设 <code>display: inline-block 和完整装饰属性
例如：
<th><span style="text-decoration: underline wavy #f00; text-underline-offset: 4px;">城市</span></th>
但要注意：这种写法在 table-layout: fixed 下容易撑宽列宽，且 Safari 对 text-underline-offset 支持仍有偏差。
波浪线这件事，核心不是“怎么设样式”，而是“在哪设才真被渲染”。表格结构本身就在和装饰线抢渲染优先级，得主动让出控制权。
