HTML表格中文本域下划线怎么显示？底线排版美化教程-html教程-PHP中文网

text-decoration-skip在表格中完全无效，应弃用；真正可控的解法是text-underline-offset或border-bottom+padding-bottom组合，后者兼容性更好且稳定。

html表格中文本域下划线怎么显示？底线排版美化教程

表格里加下划线，别碰标签，也别指望 text-decoration-skip 起作用——它早被废弃，且对 和完全无效。

为什么直接给  写 text-decoration: underline 会穿字？浏览器默认把下划线画在字体自带的 “underline position” 上，而这个位置由字体文件定义。很多中文字体（尤其是旧版 Windows 黑体、思源黑体某些版本）把这个位置设得太低，导致下划线直接切过 “g”“y”“p” 甚至中文末笔的竖钩。这不是 bug，是字体行为。


text-underline-offset 是唯一可控解法，但只在 Chrome 95+、Firefox 89+、Safari 15.4+ 有效；Safari ≤15.3 和多数安卓 WebView 会忽略它，且不 fallback 到默认位置，而是渲染出一条紧贴 descender 的粗线，看着像被截断
若表格字体是 12px，从 1px 开始试偏移值；超过 4px 容易和相邻行距冲突，视觉松散
避免在  上设 vertical-align 或 background ——这两者会让部分安卓 WebView 和旧 Safari 直接忽略 text-underline-offset
怎么给整行单元格加统一底边（兼容 border-collapse: collapse）？
 不支持 border-bottom，必须落到  和  上。用类名控制最稳：
.underline td,<br>.underline th {<br>  border-bottom: 1px solid #666;<br>}


启用了 border-collapse: collapse 时，border-bottom 仍生效，但可能被下一行的 border-top 吞掉；可加 padding-bottom: 2px 或把线宽设为 1.2px 避免视觉断裂
想只给第 2、3 列加？用 nth-child()：tr.underline td:nth-child(2), tr.underline td:nth-child(3) ——注意  算一列，如表头混用需同步写 th:nth-child(n)
避免用 nth-of-type：它只认标签类型，在 


 这种结构里行为不可控

用 box-shadow 替代 border-bottom 的真实场景
当 border-collapse: collapse 导致底边错位、合并或消失时，box-shadow 是更干净的替代方案：
.underline td {<br>  box-shadow: 0 1px 0 0 #000;<br>}

这个阴影只向下延展 1px，视觉即为一条线，完全绕过边框合并逻辑
性能无压力，现代浏览器渲染零开销
注意不要和已有 box-shadow 冲突；如已存在，可用 CSS 变量统一管理，例如 --underline-color: #666


想让下划线智能避开字母降部？别信 text-decoration-skip

该属性早在 Chrome 64+ 就被移除，Firefox 从未实现，Safari 仅在极旧版本支持——现在写 text-decoration-skip: ink 或 objects，浏览器直接忽略，控制台无报错，样式查不到生效痕迹。

											
												
												
													Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
													实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
												
												下载
												
											
										
真正能起效的是 text-decoration-skip-ink: auto，但它有苛刻前提：
必须作用于**包裹文字的内联元素**，比如 用户名，而不是直接写在  上（table-cell 渲染逻辑不一致）
字体必须含 OpenType 轮廓数据（系统字体如 Inter、SF Pro 通常 OK；Web 字体需确认含 glyf 或 CFF 表）

父级不能设 text-decoration: none，也不能用 display: inline-block 包裹文字——这两者会中断 skip-ink 渲染路径
实际项目中，text-decoration-skip-ink 在表格里极其脆弱；真要解决“下划线切穿 g/y/p”，优先调 text-underline-offset 或换 border-bottom + padding-bottom 组合——后者完全可控，且兼容到 IE11。