HTML表格：为多列布局重新使用额外的宽度

Question

假设我有一个HTML表格

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Count</th>
      <th>Year</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>10000</td>
      <td>1980</td>
      <td><button>...</button></td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>11000</td>
      <td>1990</td>
      <td><button>...</button></td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td>12000</td>
      <td>2000</td>
      <td><button>...</button></td>
    </tr>
    <!-- and now lots more of such records -->
  </tbody>
</table>

由于表格所需的宽度相当小，我希望表格通过水平重复其结构来重复使用额外的宽度。所以结果应该是这样的：

Name    Count   Year        Name    Count   Year        Name    Count   Year
Apple   10000   1980        Date    13000   1994        Kiwi    16000   1984
Banana  11000   1981        Fig     14000   1999        Lemon   17000   1985
Cherry  12000   2011        Grape   15000   1965        Mango   18000   1999

该行为应动态调整为父容器的宽度。因此，如果只有一个完整行的宽度，它应该显示通常的表行为，如果有3的空间，如上所述，依此类推。

现在我发现的唯一一件事就是使用这样的东西：

@media (min-width: 1000px) {
    table {
      column-count: 2;
      display: block;
    }
}

@media (min-width: 1400px) {
    table {
      column-count: 3;
      display: block;
    }
}

但这有很多问题：

• 它不适用于Firefox
• 我硬编码宽度
• 有时会在视觉上划分一行：上一半位于一列的底部，下半部分位于下一列的顶部
• 标题不会水平重复

知道如何实现我的需求吗？很多谷歌搜索没有发现任何东西。 （但这也可能是因为我很难找到合适的搜索词 - 'table'中的'multi column'主要导致显而易见的而不是我的意思。）在提到的问题中，与行的图形分割是杀手级的。

Answer 1

标题不会水平重复

这需要克隆DOM元素，CSS原则上不能生成新的DOM元素，所以这是不可能通过严格的CSS手段来实现的。

因此，这种响应表的唯一解决方案是使用脚本 - 根据可用宽度生成表内容。不幸。