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

Question

是否可以在 table header 和 table 行之间放置一个 HTML 元素？

中的代码

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

我目前实现此目的的方法是将 divider 行 div 放在 table 之后，并使用相对位置将其放置在 table 元素之间。但是如果 table header 或 body 的高度发生变化，我的位置相对线可能不再出现在 header 和 body 之间。

插入此 divider 行以使其始终位于 table header 和 body 之间的最佳方法是什么？

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

Answer 1

您不需要额外的标记来在 table 中添加一行。只需使用 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>

Answer 2

使用 border-bottom 添加分隔符，并使用 :last-child 选择器删除最后一行的分隔符。

jsFiddle

HTML

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

CSS

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

tr:last-child {
    border: none;
}

Answer 3

我认为更好的方法是使用 THEAD 和 TBODY 然后写一些 css 和你的 DIV

HTML

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

CSS

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

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

How to properly position an HTML elelment (a divider line) in between elements of a table

html

css

html-table

HTML

CSS