html - 我可以重复表格标题并将页面分成列吗？

Question

我有一个很长但很窄的两列表格。而不是垂直向下滚动页面，我希望表格包含页面适合的尽可能多的列。所以我将该表放入具有多列的 div 标签中：
<div style="column-count: 4; column-width: 300px;">

效果很好，但我无法让标题在屏幕上重复，其中表格跨多个容器列。如果您打印页面，浏览器似乎只会重复表格标题。

任何人都知道将长而窄的表格分成多列的更好方法，或者如何强制重复标题？

Answer 1

基本上，这是可能的，但最终结果并不理想。这就是您要的内容：https ://codepen.io/z-/pen/QWvKbMZ （如果您不使用 Pug 或 SCSS，请单击 v 并单击“查看已编译的 x”）

问题是column物业有点烂。如果顺序并不重要，最好使用 CSS 网格。在 html 中.table.column改成.table.grid看看是什么样子的。请注意，方向是从左到右然后从上到下。它还允许您根据可以容纳的列数更改列数，而无需总水平滚动条。

将来，最好尝试一下并展示您已尝试过的内容，而不是提出要求。我只是好奇地给它几分钟的工作。

Answer 2

我不认为这是可能的。

但是，一个想法可能是在仅包含列标题的“数据”上方创建一个类似的 div。如果样式正确，您甚至不会注意到它是一个不同的元素。