文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用表格在html中拆分页面

问如何使用表格在html中拆分页面
EN

Stack Overflow用户

提问于 2018-05-30 13:44:51

回答 1查看 145关注 0票数 0

我正在用jQuery打印我的页面。现在我想在新的页面上打印每个表格，例如(第1页-->表1，第2页-->表2)。但是分页符不起作用。我的表格如下：

表1

<table class="col-md-12">contents</table>

表2

 <table class="col-md-12">contents</table>

表3

<table class="col-md-12">contents</table>

我的Css

 @media print {table {
    page-break-after: always;
}

}

html

css

回答 1

Stack Overflow用户

发布于 2018-05-30 15:35:29

你可以像这样使用一些东西：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>

        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50597117

复制

相似问题

问如何使用表格在html中拆分页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用表格在html中拆分页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用表格在html中拆分页面
EN