html - 具有动态页面大小的第二个打印页眉

Question

我想article在每页上使用相同标题的列布局中打印 s 的动态列表。列表是动态的，我不知道会有多少页，也不知道在哪篇文章上会出现分页。项目是page-break-inside: avoid;。

的HTML：

<table style="width: 100%">
    <thead><tr><td>
        <header>This is the header</header>
    </td></tr></thead>
    <tbody><tr><td>
        <div class="cols">
            <article>article 1</article>
            <article>article 2</article>
            <article>article 3</article>
            <article>article 4</article>
            <article>article 5</article>
            <article>article 6</article>
            <article>article 7</article>
            <article>article 8</article>
            <article>article 9</article>
            <article>article 10</article>
        </div>
    </td></tr></tbody>
</table>

的CSS：

.cols {
    columns: 2 auto;
}

article {
    page-break-inside: avoid;
    height: 280px;
    border: 1px solid black;
}

应该创建如下内容：

文章的顺序并不重要，也不重要它们出现在哪个页面上。

但是...这会导致除第一页和仅第一页之外的所有列中的顶部文章有顶部间隙：

尝试 2：内联块

article {
    display: inline-block;
    width: 100%;
}

现在首页上的所有热门文章都有差距。（并且只有在打印过程中，屏幕显示才可以）

啊，CSS！
我也尝试过使用display: fixed带有（out）假表头占位符的标题，但也没有找到令人满意的解决方案。

有任何想法吗？

标签： htmlcssprinting