html规范禁止在table单元格中使用，因其语义是主题逻辑中断而非视觉分隔；应改用border控制网格线、伪元素实现文本装饰、划分逻辑区块。
hr 标签不能放进 table 单元格里
直接往 <td> 或 <code><th> 里写 <code><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> 设 <code>padding后再靠border模拟分隔——这会让对齐偏移，直接用border更可靠想在单元格内容中间加一条横线？用 CSS 伪元素
比如「价格 ¥199」需划掉原价，或「已停用」字段加删除线，这不是结构分隔，而是文本装饰，
<hr>完全不适用：- 用
text-decoration: line-through处理文字删除线 - 若需独立于文字的横线（如表头下方细线），给
<th> 加 <code>::after：th::after { content: ""; display: block; height: 1px; background: #e0e0e0; margin-top: 0.5em; } - 绝对不要把
<hr>塞进<td> 然后靠 <code>position: absolute拉出来——破坏语义、干扰 tab 键导航、暗色模式下易失效真正需要语义分隔的场景：用
<tbody> 替代 <code><hr>当表格本身存在逻辑断层（例如「当前订单」与「历史订单」之间），应拆分为多个
<tbody>，而非在行内插 <code><hr>：<tbody class="current-orders"> 和 <code><tbody class="history-orders"> 提供清晰的 DOM 结构和 CSS 选择器锚点 <li>用 <code>tbody + tbody { margin-top: 1.5em; }控制间距，再配一条border-top实现视觉分隔- 屏幕阅读器能感知
<tbody> 的分组语义，比硬塞 <code><hr>更准确 - 如果非要加提示文字（如“过往记录”），放
<caption></caption>或独立<tr><td colspan="100%">过往记录</td></tr>，而不是<hr>后跟文本
表格内部的“线”从来不是绘制问题，而是结构表达问题。用错标签，后期缩放、高对比度模式、键盘导航都会出岔子——尤其当用户调大系统字体或启用强制颜色时，
<hr>在单元格里的渲染几乎必然崩坏。
- 用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
