Как отобразить максимальное количество строк и автоматически создавать новые таблицы в HTML?

Question

В моей таблице 2 столбца и много строк. Запись таблицы в HTML отображает строки одну под другой и требует прокрутки.

Я хочу установить фиксированное количество строк (то есть 5 строк), чтобы «новая таблица» (с теми же двумя заголовками столбцов) отображалась рядом с первой, как только будет достигнут предел в 5 строк. .

Это позволяет сразу увидеть все строки и избежать размышлений о том, где разбивать строки.

Я сделал иллюстрацию этого: https://i.postimg.cc/ZKv16T2q/tables-illustration.jpg

Я не знаю, как это сделать (это проблема HTML, CSS или JavaScript?), Я надеюсь, что мой пост достаточно ясен.

Спасибо

Answer 1

Кто-то в Reddit дал мне хороший ответ: https://codepen.io/anon/pen/wZoYpy

HTML

    <table class="table-col">
  <thead>
    <tr>
      <th scope="col">/</th>
      <th scope="col">Title 1</th>
      <th scope="col">Title 2</th>
    </tr>
    <tr>
      <th scope="col">/</th>
      <th scope="col">Title 1</th>
      <th scope="col">Title 2</th>
    </tr>
    <tr>
      <th scope="col">/</th>
      <th scope="col">Title 1</th>
      <th scope="col">Title 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">#1</th>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <th scope="row">#2</th>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <th scope="row">#3</th>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <th scope="row">#4</th>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <th scope="row">#5</th>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <th scope="row">#6</th>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <th scope="row">#7</th>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <th scope="row">#8</th>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <th scope="row">#9</th>
      <td>text</td>
      <td>text</td>
    </tr>
  </tbody>
</table>

CSS

.table-col {
  width: 100%;
  border-collapse: collapse;
}

.table-col thead, .table-col thead tr {
  height: 52px; /* set the header height */
  overflow: hidden;
}

.table-col thead, .table-col tbody {
  display: block;
  columns: 3 400px; /* # of columns, min column width */
}

.table-col tr {
  display: flex;
  break-inside: avoid;
}

.table-col thead th {
  background-color: #eee;
}

.table-col th {
  font-weight: bold;
  text-align: left;
}

.table-col th:first-child {
  max-width: 40px;
  text-align: center;
}

.table-col td, .table-col th {
  flex: 1;
  padding: 1em;
  border-top: 1px solid #ddd;
  word-break: break-word;
}