应避免在<table>内直接使用<hr>，因其会破坏表格结构并被浏览器移出；正确做法是用CSS border-top模拟分隔线，或在外部容器中放置<hr>并精确控制样式。
直接用 <hr> 会破坏表格结构
HTML 表格（<table>）是严格嵌套的容器，<hr> 是块级元素，不能直接放在 <table> 开始标签之后、<thead> 或 <tr> 之前——浏览器会自动“修复”DOM，把 <hr> 移到表格外部，导致它出现在表格上方但脱离语义上下文，且响应式或CSS定位时容易错位。
正确做法：用CSS border模拟分隔线
最稳妥的方式是在 <table> 元素自身加顶部边框，或在包裹表格的容器上加 <hr>。推荐前者，语义清晰、控制精准：
- 给
<table>加border-top: 2px solid #ccc;，配合border-collapse: collapse;避免双线干扰 - 如果需与上方内容留空，用
margin-top控制间距，而非依赖<hr>的默认外边距 - 避免用
<tr>内首行单元格加border-top—— 这会让分隔线只跨列宽，不是全宽
如果非要用 <hr>，必须放在表格外部容器里
例如表格嵌套在 <div class="table-wrapper"> 中，<hr> 放在该 <div> 内部、<table> 之前：
<div class="table-wrapper">
<hr>
<table>
<thead></thead>
<tbody></tbody>
</table>
</div>
这样能保证 DOM 顺序可控，再通过 CSS 控制 <hr> 的宽度、边距和颜色。注意：不要给 <hr> 设 width: 100%（默认已是块级全宽），而是用 margin: 0.5em auto; 居中并留白。
立即学习“前端免费学习笔记（深入）”；
移动端或复杂布局下容易忽略的点
当表格有横向滚动（overflow-x: auto）时，<hr> 不会随表格一起滚动，而 CSS border-top 会始终贴合表格顶部。另外，某些UI框架（如Bootstrap）会重置 <hr> 样式，导致高度/颜色异常，此时直接用 border 更可靠。
