应避免在内直接使用，因其会破坏表格结构并被浏览器移出；正确做法是用css border-top模拟分隔线，或在外部容器中放置并精确控制样式。

直接用 <hr> 会破坏表格结构

HTML 表格（<table>）是严格嵌套的容器，<code><hr> 是块级元素，不能直接放在 <table> 开始标签之后、<code><thead> 或 <code><tr> 之前——浏览器会自动“修复”DOM，把 <code><hr> 移到表格外部，导致它出现在表格上方但脱离语义上下文，且响应式或CSS定位时容易错位。

正确做法：用CSS border模拟分隔线

最稳妥的方式是在 <table> 元素自身加顶部边框，或在包裹表格的容器上加 <code><hr>。推荐前者，语义清晰、控制精准：

• 给 <table> 加 <code>border-top: 2px solid #ccc;，配合 border-collapse: collapse; 避免双线干扰
• 如果需与上方内容留空，用 margin-top 控制间距，而非依赖 <hr> 的默认外边距
• 避免用 <tr> 内首行单元格加 <code>border-top —— 这会让分隔线只跨列宽，不是全宽

  如果非要用 <hr>，必须放在表格外部容器里

  例如表格嵌套在 <div class="table-wrapper"> 中，<code><hr> 放在该 <div> 内部、<code><table> 之前： <pre class="brush:php;toolbar:false;">&lt;div class=&quot;table-wrapper&quot;&gt; &lt;hr&gt; &lt;table&gt; &lt;thead&gt;&lt;/thead&gt; &lt;tbody&gt;&lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt;</pre> <p>这样能保证 DOM 顺序可控，再通过 CSS 控制 <code><hr> 的宽度、边距和颜色。注意：不要给 <hr> 设 width: 100%（默认已是块级全宽），而是用 margin: 0.5em auto; 居中并留白。

  

  html-ppt-to-pdf

  将使用 `

  ` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

  下载

  移动端或复杂布局下容易忽略的点

  当表格有横向滚动（overflow-x: auto）时，<hr> 不会随表格一起滚动，而 CSS border-top 会始终贴合表格顶部。另外，某些UI框架（如Bootstrap）会重置 <hr> 样式，导致高度/颜色异常，此时直接用 border 更可靠。