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

尝试使用page-break：

CSS

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

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

Answer 2

您可以随时使用CSS属性page-break-inside。需要一些设计或者也可以设置为自动。

欲了解更多信息，请访问以下：

w3schools: page break property

css tricks: page break property & examples

table { 
  page-break-inside:auto 
}

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

水平布局表上的分页符

2 个答案: