如何在 HTML 中显示最大行数并自动创建新表？

Question

我的表有 2 列和多行。 用 HTML 编写表格显示行一个在另一个下面并且需要滚动。

我想设置固定数量的行（即 5 行），以便一旦达到 5 行的限制，就会在第一个表格旁边显示一个“新表格”（具有 2 个相同的列标题）。

这允许一目了然地查看所有行，并避免考虑在哪里中断行。

我做了一个插图： 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;
}