Таблица с горизонтальной и вертикальной прокруткой с фиксированным заголовком - PullRequest
Новая
       22

Таблица с горизонтальной и вертикальной прокруткой с фиксированным заголовком

1 голос
/ 08 мая 2019

У меня есть таблица с горизонтальной и вертикальной прокруткой с фиксированным заголовком, элементы которого занимают столько места, сколько нужно. Я работаю с React. Было бы замечательно, если бы было решение, основанное на реакции, если только CSS не может решить это.

Примечание:

  • Я пробовал другие решения здесь но это не то, что я ищу
  • Было бы лучше, если бы на td тоже была установлена ​​минимальная ширина
  • В заголовке отображается меню, когда оно щелкается для сортировки и фильтрации

1 Ответ

1 голос
/ 09 мая 2019

Существует простое решение CSS для исправления строк (заголовков) и столбцов в таблице. 

th {
  position: sticky:
  top: 0;
}

Приведенный выше фрагмент закрепит заголовок сверху.Тогда это просто вопрос добавления простого переполнения в родительский контейнер таблицы.Вы можете найти простой пример ниже - 

.table-container {
  overflow: auto;
  max-height: 160px;
  border: 1px solid red;
}

th {
  position: sticky;
  top: 0;
  background: white;
}
<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
        <th>Head 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
  </table>
</div>
...