border-bottom 不能直接用于 <tr>，必须作用于 <td> 或 <th>；推荐用 CSS 类（如 .underline）配合 .underline td, .underline th { border-bottom: 1px solid #000; } 实现整行下划线，兼容 border-collapse: collapse 时可改用 box-shadow 避免合并干扰。
用 border-bottom 直接作用于 <tr> 无效，必须改到 <td> 或 <th>
HTML 中 <tr> 元素本身不支持 border-bottom（浏览器会忽略），所以下划线必须加在单元格上。最稳妥的做法是给目标行的所有 <td> 和 <th> 加边框底边。
- 用 CSS 类名标记要加下划线的行，比如
<tr class="underline"> - 对应写样式：
.underline td, .underline th { border-bottom: 1px solid #000; } - 如果表格用了
border-collapse: collapse，记得边框会合并，此时border-bottom仍生效，但可能被相邻行顶边覆盖——可加padding-bottom或微调border-bottom宽度避免视觉断裂
想只给某几列加下划线？用 :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>也算一列（如果表头是<th>，且位于同一行，需同步处理th:nth-child(n)） - 避免用
nth-of-type，它只认标签类型，在混合<td>/<th>的行里行为不可控 - 若列数动态变化，建议改用类名绑定到具体
<td>上，比伪类更可靠
用 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——后者会破坏表格盒模型布局。
