Question

CSS / SCSS的新功能我的桌子比屏幕要宽，所以我希望页眉与桌子的其余部分左右移动。我还希望标题保留在原位，而不是在表中上下滚动，这样，如果您向下滚动到右侧，您仍然可以知道这些值属于哪些列。而且我无法缩小桌子。我正在使用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>

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

标题必须是固定的。
垂直和水平滚动。我正在使用的表比屏幕本身宽。
固定列大小是可以的。

基本上向左，向右，上下滚动，并且标题仍然位于顶部，以引用您要查看的单元格。

我意识到添加固定列宽的唯一方法。在随附的Codepen中，我似乎无法获取要匹配的列的大小。据我所知，列中较长的数据导致对齐问题。我已尝试overflow: hidden;来防止这种情况，但似乎忽略了它。它似乎也忽略了我尝试设置宽度。 If you would kindly take a look at my code-pen attempt.

非常感谢您的帮助。谢谢。

Answer 1

一般提示：使用divs而不是表格*（除非用于表格数据）

但是对于这个问题，请尝试将td max-width设置为与th相同的宽度，例如：

td {
  max-width: 41px;
}

Answer 2

对于粘性桌面，我建议使用一个npm软件包来节省您的时间和精力。检查一下：react-sticky-table-thead您所要做的就是在表周围包裹一个组件，例如：

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

纯CSS固定表标题

2 个答案: