html - 跨列重复

Question

真的很简单。我可能错过了一些明显的东西，但这里有。

我有一个<table>内部的多列视图。想法是，它是一张相当高的桌子，因此将它放在多列上可以减少令人讨厌的垂直度，并且更适合屏幕显示。

问题是第 2 列及以后的行没有标题。

但是，如果我去打印预览，每一列都有一个“副本” <thead>——因为它应该，IMO，因为这就是它的<thead>用途。

是否有可能让这种行为（显然默认情况下仅在 中可用）@media print在网页本身上工作？

（请注意，表格的内容是动态的，整个事情应该是响应式的，所以手动插入/分解表格是不行的。）

#container {
  column-count: 3;
}

<div id="container">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
    </tbody>
  </table>
</div>

标签： htmlcss