Как заставить заголовок таблицы выровняться по верху и остаться сверху?

Question

У меня есть виртуализированная таблица, над которой я работаю (на примере). Как сделать так, чтобы заголовок таблицы располагался правильно, а также оставался в верхней части таблицы при прокрутке

Кодовая песочница: -

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

Answer 1

Заголовок таблицы и тело не выровнены

Это вызвано display: flex, используемым в классе .DataTable-tableContent-4 CSS вашего элемента <table> и во встроенном стиле вашего <tbody> , Если вы избавитесь от него, заголовок и тело таблицы будут выстроены в соответствии с назначением.

Исправление прокручиваемости таблицы

Чтобы сделать таблицу прокручиваемой, вы определили 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>

РЕДАКТИРОВАТЬ:

Здесь является исправленной версией вашего кода (Отказ от ответственности: я далеко не бегло в React , исправление кода не было выполнено в соответствии с рекомендациями React или Material-UI)

Answer 2

Я редактировал с новым содержанием: извините, я не видел прокрутку. используйте в 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"
    }
  },

``