Question

像How to deal with page breaks when printing a large HTML table这样的问题模拟器问题，我想做对手的事情，是否有办法使用CSS来设置页面结束点。例如：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    .endOfThePage {  } //some css to mark as the end of current page in print mode
    </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>
        <!-- 500 more rows -->

<tr>
            <td>x</td>
        </tr>
<div class = "endOfThePage"></div>
<!--some other stuff that will be printed on the next page -->

    </tbody>
    </table>
</body>
</html>

因此，当用户点击打印件（window.print）时，会有2个页面，其中一个位于endOfThePage div之前，另一个位于页面的其余部分。< / p>

我希望很清楚。

Answer 1

创建一个额外的样式表 print.css ，并将其包括在内：

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

在此样式表中，使用posititon:absolute和px中的边距定义它。

Answer 2

所以我用了

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

Working fiddle

CSS - 在打印时设置当前页面的结尾

2 个答案: