如何制作HTML表格内部的分隔线：HR标签在单元格内的应用

HTML规范禁止在table单元格中使用，因其语义是主题逻辑中断而非视觉分隔；应改用border控制网格线、伪元素实现文本装饰、<tbody>划分逻辑区块。

hr 标签不能放进 table 单元格里

直接往 <td> 或 <th> 里写 <hr> 是无效且语义错误的。HTML 规范明确禁止在表格单元格中使用 <hr> —— 它不是“画线工具”，而是表示**主题逻辑中断**的语义元素，而表格单元格内部不存在这种结构层级。浏览器会忽略或自动修正该用法，实际渲染不可控，且屏幕阅读器可能报错或跳过。

table 内部需要分隔线时，该用 border 而非 hr

表格内部视觉分隔的本质是网格线控制，border 是唯一合理、稳定、可预测的方案：

• border-collapse: collapse 是前提，否则默认 separate 模式下边框间距不可控
• 单侧边框最灵活：td:nth-child(2) { border-left: 1px solid #e0e0e0; } 可精准加竖线
• 行间横线用 tr + tr { border-top: 1px solid #e0e0e0; }，比在每行末尾塞 <hr> 干净得多
• 避免给 <td> 设 padding 后再靠 border 模拟分隔——这会让对齐偏移，直接用 border 更可靠

想在单元格内容中间加一条横线？用 CSS 伪元素

比如「价格 ¥199」需划掉原价，或「已停用」字段加删除线，这不是结构分隔，而是文本装饰，<hr> 完全不适用：

• 用 text-decoration: line-through 处理文字删除线
• 若需独立于文字的横线（如表头下方细线），给 <th> 加 ::after：

  th::after { content: ""; display: block; height: 1px; background: #e0e0e0; margin-top: 0.5em; }

• 绝对不要把 <hr> 塞进 <td> 然后靠 position: absolute 拉出来——破坏语义、干扰 tab 键导航、暗色模式下易失效

真正需要语义分隔的场景：用 <tbody> 替代 <hr>

当表格本身存在逻辑断层（例如「当前订单」与「历史订单」之间），应拆分为多个 <tbody>，而非在行内插 <hr>：

立即学习“前端免费学习笔记（深入）”；

• <tbody class="current-orders"> 和 <tbody class="history-orders"> 提供清晰的 DOM 结构和 CSS 选择器锚点
• 用 tbody + tbody { margin-top: 1.5em; } 控制间距，再配一条 border-top 实现视觉分隔
• 屏幕阅读器能感知 <tbody> 的分组语义，比硬塞 <hr> 更准确
• 如果非要加提示文字（如“过往记录”），放 <caption> 或独立 <tr><td colspan="100%">过往记录</td></tr>，而不是 <hr> 后跟文本

表格内部的“线”从来不是绘制问题，而是结构表达问题。用错标签，后期缩放、高对比度模式、键盘导航都会出岔子——尤其当用户调大系统字体或启用强制颜色时，<hr> 在单元格里的渲染几乎必然崩坏。