如何将HTML元素（分隔线）正确定位在表元素之间

是否可以在表头和表行之间放置HTML元素

类似于我的代码：

标题1
标题2
标题3
值1
价值2
价值3

我目前实现这一点的方法是将分隔线div放在表之后，并使用相对位置将其放置在表元素之间。但是，如果表格标题或正文的高度发生变化，我的位置相对线可能不再出现在标题和正文之间

插入分隔线以使其始终位于表头和正文之间的最佳方式是什么

---

非常感谢您抽出时间。如果您需要更多信息或我不清楚，请告诉我。

您不需要额外的标记来在表中添加一行。只需使用CSS：

th{
边框底部：2个实心#8484；
}
桌子{
边框折叠：折叠；/*删除单元格之间的空间*/
}

标题1
标题2
标题3
值1
价值2
价值3

在表中放一行不需要额外的标记。只需使用CSS：

th{
边框底部：2个实心#8484；
}
桌子{
边框折叠：折叠；/*删除单元格之间的空间*/
}

标题1
标题2
标题3
值1
价值2
价值3

使用

边框底部

添加分隔符，并使用

：last child

选择器删除最后一行的分隔符

HTML

---

使用

border-bottom

添加分隔符，并使用

：last-child

选择器删除最后一行的分隔符

HTML

---

我认为更好的方法是使用THEAD和TBODY，然后编写一些与DIV相同的css

HTML

---

我认为更好的方法是使用THEAD和TBODY，然后编写一些与DIV相同的css

HTML

---

不能在表行之间放置div，这是无效的HTML。您试图达到什么效果。

tr+tr{border bottom:1px solid grey}

为什么不只将边框应用到表单元格或行或其他方面？如果你想在任何东西之间划一行，就像在Excel中一样。你不能在表行之间放置div，这是无效的HTML。您试图达到什么效果。

tr+tr{border bottom:1px solid grey}

为什么不将边框应用于表格单元格或行或其他内容？就像你在Excel中做的那样，如果你想在任何东西之间划一条线。

<table style="width:100%">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>       
    <th>Header 3</th>
  </tr>
<div style="background-color: #848484; width: 100%; height:1px; margin:0px; padding: 0px;"></div>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>        
    <td>Value 3</td>
  </tr>
</table>

<table style="width:100%">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>       
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>        
    <td>Value 3</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>        
    <td>Value 3</td>
  </tr>
</table>

tr {
    display: block;
    border-bottom: 11px solid grey;
}

tr:last-child {
    border: none;
}

<thead>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
</thead>

thead {border-bottom:1px solid #848484;}