如何让表头与顶部对齐并保持在顶部？

Question

我正在处理一个虚拟化表（使用示例）。如何让表格标题正确排列并在滚动时保持在表格顶部

代码沙箱：-

https://codesandbox.io/s/material-ui-table-virtualized-t2xkt

Answer 1

我编辑了新内容：抱歉，我没有看到滚动。 在 DataTable.js 中使用 flex-direction: column:

  tableContent: {
    overflowY: "scroll",
    borderCollapse: "collapse",
    display: "flex",
    flexDirection: "column"
  },

并在表头单元格宽度10%：

 tableCellHead: {
    fontSize: "1rem",
    fontWeight: "bold",
    border: "1px solid rgba(224, 224, 224, 1)",
    width:" 10%",
    "&:last-child": {
      paddingRight: "4px"
    }
  },

``

Answer 2

表头和表体没有对齐

这是由<table> 元素的.DataTable-tableContent-4 CSS 类和<tbody> 的内联样式中使用的display: flex 引起的。如果你去掉它，你的表格标题和正文将按预期排列。

修复表格的可滚动性

为了使表格可滚动，您定义了height 和overflow-y: scrollable，这是正确的做法，但您在错误的元素上做了。 这些 CSS 属性必须位于表格容器之一，表格的任何父元素，而不是表格本身。

滚动时表格标题保留在表格顶部

您可以使用position: sticky CSS 属性，该属性与top: 0 相结合，让您的标题在滚动时出现在表格顶部。

这是一个演示：

.container {
  height: 150px;
  overflow-y: scroll;
}

thead {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <td>Name</td>
        <td>Reputation</td>
        <td>Meme potential</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jon Skeet</td>
        <td>Far too much</td>
        <td>High</td>
      </tr>
      <tr>
        <td>John Doe</td>
        <td>Less that Jon Skeet</td>
        <td>Medium</td>
      </tr>
      <tr>
        <td>Community</td>
        <td>-1</td>
        <td>Low</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Unknown</td>
        <td>Low</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Unknown</td>
        <td>Low</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Unknown</td>
        <td>Low</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Unknown</td>
        <td>Low</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Unknown</td>
        <td>Low</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Unknown</td>
        <td>Low</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Unknown</td>
        <td>Low</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Unknown</td>
        <td>Low</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Unknown</td>
        <td>Low</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Unknown</td>
        <td>Low</td>
      </tr>
    </tbody>
  </table>
</div>

编辑：

Here 是您的代码的更正版本（免责声明：我对 React 还很不熟练，代码更正没有按照 React 和 Material-UI 最佳实践进行）