javascript - 滚动应该出现在具有固定表头的整个表中

Question

我有一个带滚动条的表格，它适用于 tbody。它工作正常。我需要的是我需要适用于整个表格的滚动条，表格标题应该固定在该位置。 .

我有工作样本。请查看 fiddle

我希望表格 ui 看起来像表格标题在滚动时固定在该位置。

Answer 1

对于您所要求的内容，这是一种黑客方法。请验证这是否是您期望的输出。

.container {
   overflow: auto;
   height: 100px;
}
.fixed_header{
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
   position: relative;
}

.fixed_header tbody{
   display:block;
   width: 100%;
   padding-top: 30px; //Height of the header
}

.fixed_header thead tr {
   display: block;
}

.fixed_header thead {
   background: black;
   color:#fff;
   position: absolute; //To fix the header on the top of the table
   left: 0;
   right: 0;
   top: 0;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}

<div class='container'>
<table class="fixed_header">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
    </tr>
    <tr>
      <td>row 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
      <td>row 5-3</td>
      <td>row 5-4</td>
    </tr>
    <tr>
      <td>row 6-0</td>
      <td>row 6-1</td>
      <td>row 6-2</td>
      <td>row 6-3</td>
      <td>row 6-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
    </tr>
  </tbody>
</table>
</div>