html - 纯 CSS 固定表头

Question

CSS/SCSS 新功能我的 table 比屏幕宽，所以我希望标题与 table 的其余部分一起左右移动。我还希望标题保持在原位，而不是随着表格上下滚动，这样如果您向下滚动到右侧，您仍然可以知道这些值属于哪些列。而且我不能把 table 变小。我正在使用 React 并尝试过 react-sticky-tables但它似乎无法正常工作。

.fixed_table_wrapper {
  width: 500px;
  overflow-x:scroll;
}

.fixed_header{
    width: 500px;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow-x: scroll;
  height: 100px;
}

.fixed_header thead tr {
   display: block;
}

.fixed_header thead {
  background: black;
  color:#fff;
}

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

}

<div class="fixed_table_wrapper">
<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>
      <th>Col 6</th>
      <th>Col 7</th>
      <th>Col 8</th>
      <th>Col 9</th>
      <th>Col 10</th>
      <th>Col 11</th>
      <th>Col 12</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>
      <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>
      <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>
      <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 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
      <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>
      <td>row 1-3</td>
      <td>row 1-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>
      <td>row 1-0</td>
      <td>row 1-3</td>
      <td>row 1-4</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 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
      <td>row 5-3</td>
      <td>row 5-4</td>
      <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>
      <td>row 1-3</td>
      <td>row 1-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>
      <td>row 1-0</td>
      <td>row 1-1</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-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>
      <td>row 1-0</td>
      <td>row 1-1</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-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>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-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>
      <td>row 1-0</td>
      <td>row 1-1</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-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>
      <td>row 1-0</td><td>row 1-3</td>
      <td>row 1-4</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 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-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>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-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>
      <td>row 1-0</td><td>row 1-3</td>
      <td>row 1-4</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 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
      <td>row 1-0</td>
      <td>row 1-1</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-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>
      <td>row 1-0</td>
      <td>row 1-1</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-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>
      <td>row 1-0</td>
      <td>row 1-1</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 7-0 asdhjkl;wejf;lkjs</td>
      <td>row 7-1 asdhjkl;wejf;lkjs</td>
      <td>row 7-2 asdhjkl;343gwefgsdwejf;lkjs</td>
      <td>row 7-3 asdhjkl;wejf;lkjs</td>
      <td>row 7-4 asdhjkl;wejf;lkjs</td>
      <td>row 1-0 asdhjkl;wejf;lkjs</td>
      <td>row 1-1 asdhjkl;wejf;lkjs</td><td>row 1-3</td>
      <td>row 1-4</td>
      <td>row 1-2 asdhjkl;wejf;lkjs</td>
      <td>row 1-3 asdhjkl;wejf;lkjs</td>
      <td>row 1-4 asdhjkl;wejf;lkjs</td>
    </tr>
  </tbody>
</table>
</div>

我正在尝试创建一个表。这是我的标准；

1. header 必须固定。
2. 垂直和水平滚动。我正在使用的 table 比屏幕本身宽。
3. 具有固定的列大小是可以的。

基本上左右滚动，上下滚动，顶部仍然有标题以引用您正在查看的单元格。

我意识到只有这样才能添加固定的列宽。在附带的代码笔中，我似乎无法匹配列的大小。据我所知，列中较长的数据导致对齐问题。我试过 overflow: hidden; 来防止这种情况，但它似乎忽略了它。它似乎也无视我试图设置宽度。 If you would kindly take a look at my code-pen attempt.

如果有任何帮助，我将不胜感激。谢谢。

Answer 1

对于 sticky table head，我推荐一个 npm 包，可以节省你的时间和精力。检查一下:react-sticky-table-thead 你所要做的就是在你的 table 周围包裹一个组件，比如:

<StickyHeader>
  <table>
    <thead>
      <tr><th>Head</th></tr>
    </thead>
    <tbody>
      <tr><td>Data</td></tr>
    </tbody>
  </table>
</StickyHeader>