打印文档时出现嵌套表问题

Question

我有一张要打印的表格。所以基本结构是包含一个嵌套的table，两者都包含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： 在我看来，如果您希望所有页面上的所有主题信息，唯一可行的解​​决方案是将所有 th 移动到 thead 顶部的 table 顶部，因此您将在每个页面上都有所有信息working example for this solution, print button on the top

希望这会有所帮助:)