html - 如何在表格元素之间正确定位 HTML 元素(分隔线)

Question

是否可以在表格标题和表格行之间放置 HTML 元素？

类似于我在 this plunker 中的代码:

<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>

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

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

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

Answer 1

您不需要额外的标记即可在表格中放置一行。只需使用 CSS:

th {
    border-bottom: 2px solid #848484;
}
table {
    border-collapse: collapse; /* remove space between cells */
}

<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>
</table>