编辑：

Question

我有一张桌子正在尝试打印。因此基本结构包含一个嵌套表，两者都包含 thead 。打印完成后，pdf显示重叠 thead 。

请查找附件链接以重现代码。 https://www.dropbox.com/s/a0l0s7blh401tg7/table.html

<table>
    <thead>
        <tr>
            <td>heading</td>
        </tr>
        <tbody>
            <tr>
                <td>
                    <table>
                        <thead>
                            <tr>
                                <th>Heading 2</th>
                            </tr>
                    </table>
                </td>
            </tr>               
        </tbody>
    </thead>
</table>

Answer 1

尝试以下css （这只有在你只有一个非常简单的时候才有用）：

thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }

编辑：

关于您的问题： thead重叠的原因是您的table标记本身。现在我们有多个table和thead，以及导致重叠的填充。我做了一些研究，发现了两种不同的解决方案。

事实1：标记中只有最新的thead才会在打印时放在第二页上。因此，您可以像working example here, print button on the top：

一样检查和调整您的表格

<table>
    <!-- thead on first page -->
    <thead>
        <tr>
            <th> ... </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <table>
                    <!-- thead on first page an all following -->
                    <thead>
                        <tr>
                            <th> ... </th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td> ... </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

事实2：在我看来，如果您想要所有网页上的所有thead信息，唯一可行的解决方案是将所有th移到一个thead的顶部table，因此您将在每个页面working example for this solution, print button on the top

上获得所有信息

希望这有助于：）

打印文档时嵌套表问题

1 个答案:

编辑：