jquery - 水平布局表上的分页符

Question

我有一个动态生成的水平表格，用于呈现此示例 html...

<div>
    <table>
        <thead>
            <tr>
                <th></th>
                <th></th>
                ....(repeated till 30 cells)
                <th></th>
            </tr>
        </thead>
        <tbody id="body1">
            <tr>
                <td></td>
                <td></td>
                ....(repeated till 30 cells)
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                ....(repeated till 30 cells)
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                ....(repeated till 30 cells)
                <td></td>
            </tr>
        </tbody>
        <tbody id="body2">
            <tr>
                <td></td>
                <td></td>
                ....(repeated till 30 cells)
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                ....(repeated till 30 cells)
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

我的问题是，当我尝试以横向模式打印时，通过缩小不可读的内容使其适合一页。有没有办法通过使用 jQuery/css 或任何其他方式在 20 个单元格后引入分页符来避免它？ 我正在寻找这样的东西

第一页...

<table>
    <tr>
        | td1 | td2 |...| td20 | 
    </tr>
    <tr>
        | td1 | td2 |...| td20 | 
    </tr>
</table>

第二页...

<tr>
    | td21 | td22 |...| td30 | 
</tr>
<tr>
    | td21 | td22 |...| td30 | 
</tr>

Answer 1

尝试使用分页符:

CSS

table { 
  display:block;
  page-break-inside:auto 
}

tr { 
  page-break-inside:avoid; 
  page-break-after:auto; 
}