如何在HTML表格单元格内添加分隔线？HR标签应用

先说一个基本判断：在表格单元格里塞

---

，这条路走不通，也不该走。

直接把

---

放到 或 里？这事儿真不行。HTML 规范白纸黑字写着，

---

这个标签的语义是“主题逻辑中断”，用来分隔不同章节、不同区块的内容。但表格单元格内部压根没有这种结构层级——你总不能在一个格子里面再分段落吧？所以浏览器拿到这种写法，要么直接忽略，要么自作主张帮你修正，结果就是渲染效果不可控，屏幕阅读器也可能一头雾水。

那表格内部需要分隔线的时候怎么办？答案是 border，稳得很。

用 border 控制网格线，而不是 hr

如果你在表格里看到了分隔线，那本质上是在控制网格线。这事儿 border 是正主，好用，稳定，也不挑浏览器。

• 先把 border-collapse: collapse 加上，否则默认的 separate 模式会让边框间距变得不可控，治标不治本。
• 想加竖线？td:nth-child(2) { border-left: 1px solid #e0e0e0; } 这一行代码搞定，精确到列，想加哪一列就加哪一列。
• 行间横线用 tr + tr { border-top: 1px solid #e0e0e0; }，比在每行末尾塞一个

  ---

  干净利落得多，而且维护也方便。
• 还有一个容易踩的坑：别给 设 padding 后再拿 border 模拟分隔线——这个做法会让对齐偏移，直接上 border 就行，别绕弯子。

单元格内容中间的横线？交给 CSS 伪元素

拿一种常见场景来说：商品价格显示“199”，需要划掉原价，或者某个字段标记为“已停用”，要加一条删除线。这是文本装饰，不是结构分隔，

---

完全不适用。

• 文字删除线？text-decoration: line-through 直接搞定，简单粗暴。
• 如果横线和文字无关，比如表头下方那条细线，给 加一个 ::after 伪元素就行：

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

• 绝对不要动歪心思：把

  ---

  塞进 后用 position: absolute 拉出来——这操作既破坏了语义，还会干扰 Tab 键导航，暗色模式下也可能渲染出错，得不偿失。

真正需要语义分隔时，用

如果表格本身存在逻辑断层，比如上半部分是“当前订单”，下半部分是“历史订单”，这时候在中间插一个

---

就完全跑偏了。正确的做法是拆成多个 。

• 和 —— 这样既提供了清晰的 DOM 结构，也有了现成的 CSS 选择器锚点，后期维护时一目了然。
• tbody + tbody { margin-top: 1.5em; border-top: 1px solid #e0e0e0; } —— 间距和视觉分隔一气呵成。
• 屏幕阅读器能识别 的分组语义，比硬塞一个

  ---

  准确得多。
• 如果非要加一句提示文字，比如“过往记录”，就用 或者单独 过往记录，别跟

  ---

  混在一起。

经验表明，表格内部的“线”从来不是绘制问题，而是结构表达问题。用错标签，后期缩放、高对比度模式、键盘导航都会出岔子——尤其是用户调大系统字体或者启用强制颜色时，

---

在单元格里的渲染几乎必然崩坏。与其事后补救，不如一开始就把语义和样式分清楚。