Чистый CSS фиксированный заголовок таблицы - PullRequest
Новая
       9

Чистый CSS фиксированный заголовок таблицы

0 голосов
/ 08 ноября 2018

Новое с CSS / SCSS Моя таблица шире, чем экран, поэтому я хочу, чтобы заголовок перемещался влево и вправо с остальной частью таблицы. Я также хочу, чтобы заголовок оставался на месте, а не прокручивался вверх и вниз по таблице, чтобы при прокрутке вниз вправо можно было узнать, к каким столбцам принадлежат эти значения. И я не могу сделать стол меньше. Я использую React и попробовал реагировать-липкие таблицы , но, похоже, он не работал должным образом. 

.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. Заголовок должен быть исправлен.
  2. Вертикальная и горизонтальная прокрутка. Таблица, с которой я работаю, шире самого экрана.
  3. С фиксированным размером столбца все в порядке.

В основном прокручивайте влево-вправо, вверх-вниз и все еще держите заголовок вверху, чтобы указать, на какую ячейку вы смотрите.

Я понимаю, что единственный способ добавить фиксированную ширину столбца. В прилагаемом коде я не могу получить размер столбцов для соответствия. Из того, что я могу сказать, более длинные данные в столбцах вызывают проблему выравнивания. Я пытался overflow: hidden; предотвратить это, но, похоже, это игнорирует. Это также, кажется, игнорирует меня, пытающегося установить ширину. Если вы не возражаете, посмотрите на мою попытку с ручкой.

Я бы очень признателен за любую помощь. Спасибо.

1 Ответ

0 голосов
/ 08 ноября 2018

Общий совет: используйте divs вместо таблиц * (если только это не для табличных данных)

Но для этой проблемы попробуйте установить td max-width на ту же ширину, что и th, например: 

td {
  max-width: 41px;
}
...