border-bottom 不能直接用于 ，必须作用于 或 ；推荐用 css 类（如 .underline）配合 .underline td, .underline th { border-bottom: 1px solid #000; } 实现整行下划线，兼容 border-collapse: collapse 时可改用 box-shadow 避免合并干扰。
用 border-bottom 直接作用于 <tr> 无效，必须改到 <code><td> 或 <code><th>
<p>HTML 中 <code><tr> 元素本身不支持 <code>border-bottom（浏览器会忽略），所以下划线必须加在单元格上。最稳妥的做法是给目标行的所有 <td> 和 <code><th> 加边框底边。
<ul><li>用 CSS 类名标记要加下划线的行，比如 <code><tr class="underline">
<li>对应写样式：<pre class="brush:php;toolbar:false;">.underline td, .underline th { border-bottom: 1px solid #000; }</pre>
</li>
<li>如果表格用了 <code>border-collapse: collapse，记得边框会合并，此时 border-bottom 仍生效，但可能被相邻行顶边覆盖——可加 padding-bottom 或微调 border-bottom 宽度避免视觉断裂
想只给某几列加下划线？用 :nth-child() 精准控制
:nth-child() 精准控制不是整行都要下划线时，直接选单元格更灵活。比如只给第 2、3 列加底边：
tr.underline td:nth-child(2), tr.underline td:nth-child(3) { border-bottom: 1px solid #666; }
-
nth-child(n)从左往右数，注意<th> 也算一列（如果表头是 <code><th>，且位于同一行，需同步处理 <code>th:nth-child(n)） - 避免用
nth-of-type，它只认标签类型，在混合<td>/<code><th> 的行里行为不可控 <li>若列数动态变化，建议改用类名绑定到具体 <code><td> 上，比伪类更可靠 <h3>用 <code>box-shadow模拟下划线，避开边框合并干扰当表格启用了
border-collapse: collapse且你发现border-bottom被吞掉或错位，box-shadow是更干净的替代方案：.underline td { box-shadow: 0 1px 0 0 #000; }- 这个阴影只向下延展 1px，视觉上就是一条线，不受边框合并影响
- 性能开销极小，现代浏览器渲染无压力
- 注意不要和已有
box-shadow冲突；如已存在，可用inherit合并或用 CSS 变量统一管理
JavaScript 动态加下划线？别直接操作 style，优先 toggle class
运行时决定哪行加下划线，用 JS 控制 class 最安全：
document.querySelector('tr[data-id="row-123"]').classList.add('underline');- 避免用
element.style.borderBottom = '1px solid #000'—— 这样写死内联样式，后续 CSS 覆盖困难，也难维护 - 如果目标行还没渲染完，确保 JS 在 DOM ready 后执行，或用
MutationObserver监听表格变动 - 多行批量操作时，用
querySelectorAll('tr.target')+forEach，别用for...in遍历 HTMLCollection
真正容易被忽略的是：表格行高、字体大小、
line-height会影响下划线与文字的垂直距离。如果下划线贴得太近或太远，优先调padding-bottom或border-bottom的width，而不是硬调margin——后者会破坏表格盒模型布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
