滚动应显示具有固定表头的整个表

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>