Question

我和page-break-inside:auto, page-break-inside:avoid, page-break-after:auto, margin-top and margin-bottom和其他人玩了很长时间，但是仍然找不到解决方法如何在我的长HTML表中打破行，这是打印的。

页面看起来像打印模式中的左侧屏幕截图（或在Chrome中打印之前的预览窗口）：

我需要实现的是打破每个页面底部的每一行，这将分为两页（及其内容......）

这是我页面的一段代码：

...
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
td { padding-left: 15px; padding-right: 15px; }
@media print{
    .netisk{
        visibility: hidden;
    }
}
@page{
    size: 21cm 29.7cm;
    margin: 0px;
}
body {
    margin-left: 1cm;
    margin-right: 1cm;
}
</style>
...
...
...
<?php

    echo "<table cellspacing='0'><thead><tr><th> ID </th><th> Název projektu </th><th> Kategorie </th><th> Autor </th><th> Třída </th><th> Rok </th><th> Vedoucí práce </th></tr></thead><tbody>";

if (mysql_num_rows($result) > 0) {
    while($row = mysql_fetch_assoc($result)) {
        echo "<tr><td>" . $row["id"]. "</td><td>" . $row["nazev_projektu"]. "</td><td>" . $row["kategorie"]. "</td><td>" . $row["autor"]. "</td><td>" . $row["trida"]. "</td><td>" . $row["rok"]. "</td><td>" . $row["vedouci_prace"]. "</td></tr>";
    }
}
    echo "</tbody></table>";

    mysql_close($mysql_conn);

?>
...
...

Page在这里：http://student.spsbv.cz/krolop.el12a/mproj/components/tisk.php

正如您所看到的，存在一个问题，即我的表“根据MySQL数据库中的数据计数”动态“增长”，因此很难分配一个特定的行，表应该被破坏。

如何解决这个问题？

编辑：给定的解决方案（How to apply CSS page-break to print a table with lots of rows?）没有解决我的问题，是否有任何不同的方式（使用HTML和CSS）？

Answer 1

罗伯托·罗西（Roberto Rossi）是对的（由于声誉我无法添加评论），但我还发现了此帖子，其中包含更多信息，看来这是一个潜在的重复问题：

How to deal with page breaks when printing a large HTML table

编辑：

接受的答案- User: Sinan Ünür

<!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>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

补充答案- User: Josh P

注意：当使用page-break-after：always作为标记时，它将在表的最后一位之后创建一个分页符，每次都在末尾创建一个完全空白的页面！要解决此问题，只需将其更改为page-break-after：auto。它将正确中断并且不会创建额外的空白页。

<html>
<head>
<style>
@media print
{
table { page-break-after:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
td    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
</head>

<body>
....
</body>
</html>

Answer 2

您应该在以下时间使用分页符：

<div class="breakafter"></div>

和css风格：

div.breakafter { 
  page-break-after: always; 
}

HTML，CSS - 长表的行中断需要修复

2 个答案: