修复了具有许多 tbody 的可滚动 div 中的表头

Question

在过去的 3 天里，我一直在尝试将我的表格的thead 固定在可滚动的 div 中，但失败了。

我有一个格式如下的表格：

<div class='div_container'>
<table id='table'> 
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
</thead>
<tbody>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
<tbody>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>

我试图将标题固定在 div 的顶部，但我唯一得到的（除了完全失败）是 thead 变得固定但它超出了 div 边距。

任何想法如何解决这个问题？

我尝试过同时使用 CSS 和 js，但还是没有运气。

到目前为止我的 CSS：

.div_container{
    overflow: scroll;
    display: block;
    height: 600px;
    margin-left: 10%;
    margin-right: 10%;    
}

#table tbody .resultsRow td {
    text-align: center;    
}

thead {
      position: sticky;
       /* display: block; */
}

Answer 1

使用position: sticky;试试这个纯css固定表头解决方案

div {
  display: inline-block;
  height: 200px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

table {
  border-collapse: collapse;
}

th {
  background-color: #ddd;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

<div>
  <table>
    <thead>
      <tr class="header">
        <th>header 1</th>
        <th>header 2</th>
        <th>header 3</th>
        <th>header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
</div>