【问题标题】：Can I repeat table header with page broken into columns?我可以重复表格标题并将页面分成列吗？
【发布时间】：2021-08-09 23:47:02
【问题描述】：
我有一个很长但很窄的两列表格。我不想垂直向下滚动页面，而是希望表格包含页面适合的尽可能多的列。所以我将该表放入具有多列的 div 标签中：
<div style="column-count: 4; column-width: 300px;">
效果很好，但我无法在表格跨多个容器列的屏幕上重复标题。如果您打印页面，浏览器似乎只会重复表格标题。
有谁知道将长而窄的表格分成多列的更好方法，或者如何强制重复标题？
【问题讨论】：
标签：
html
css
css-multicolumn-layout
【解决方案1】：
基本上，这是可能的，但最终结果并不理想。这就是您要的：https://codepen.io/z-/pen/QWvKbMZ（如果您不使用 Pug 或 SCSS，请单击 v 并单击“查看已编译的 x”）
问题在于column 属性有点糟糕。如果顺序并不重要，最好使用 CSS 网格。在 html 中将 .table.column 更改为 .table.grid 看看是什么样的。请注意，方向是从左到右然后从上到下。
它还允许您根据可以容纳的列数更改列数，而无需总水平滚动条。
将来最好尝试一下并展示您的尝试，而不是提出要求。我只是好奇地给它几分钟的工作。
【解决方案2】：
我认为这是不可能的。
但是，一个想法可能是在仅包含列标题的“数据”上方创建一个类似的 div。如果样式正确，您甚至不会注意到这是一个不同的元素。