如果表格必须垂直滚动，如何将表格的标题固定到页面顶部？

Question

我有一个垂直很长的表格，那么它必须使用overflow: auto hidden。 我必须准备这个表格的标题，在滚动后固定在页面顶部（防止滚动后隐藏表格的标题）。

问题是当我尝试在 thead 或 thead tr 上使用 position: fixed; top: 100px 时，此标头与表格和 tbody 失去连接，并且其宽度与 tbody 不同（th 未连接到正文中的适当 td ）。 tbody 也失去了溢出：自动隐藏，现在具有典型的页面宽度 100%。

SOME CONTENT BEFORE
<div style="overflow: auto;" class="table-responsive">
  <table class="products-table">
     <thead>
        <tr>
           <th>First</th>
           <th>Second</th>
           <th>Third</th>
           <th>Fourth</th>
           <th>Fifth</th>
           <th>Sixth</th>
           <th>...</th>
           <th>...</th>
           <th>...</th>
           <th>...</th>
         </tr>
      </thead>

      <tbody>
        <tr>
           <td>First</td>
           <td>Second</td>
           <td>Third</td>
           <td>Fourth</td>
           <td>Fifth</td>
           <td>Sixth</td>
           <td>...</td>
           <td>...</td>
           <td>...</td>
           <td>...</td>
         </tr>                            
      </tbody>
    </table>
</div>
SOME CONTENT AFTER

样式：

.products-table
  border-collapse: separate
  border-spacing: 0 12px
  min-width: 100%
  font-size: 15px
  border-bottom: 4px solid grey

  td,th
    padding: 0 10px
    max-width: 300px
    &:first-of-type
      border-radius: 9px 0 0 9px
      padding-left: 14px
    &:last-of-type
      border-radius: 0 9px 9px 0
      padding-right: 14px
  thead
    background-color: grey
    color: white
    font-weight: 700
    th
      height: 26px
      white-space: nowrap
      a
        color: white
  tbody
    tr
      padding: 0 14px
      td
        word-break: break-word
        background-color: white
        max-width: 300px
      &:nth-of-type(odd) td
        background-color: #f6f6f6

请帮忙...

我已经尝试了许多基于类似问题的选项，例如位置粘性。

Answer 1

您可以将以下代码添加到您的 css 中。

thead tr th {
  /*Fixed Scroll*/
  position: sticky;
  top: 0;
  z-index: 9999;
}

table {
  position: relative;
}