HTML、CSS - 长表的换行需要修复答案

【问题标题】：HTML, CSS - Row break for long table needs a fixHTML、CSS - 长表的换行需要修复
【发布时间】：2016-07-30 22:15:08
【问题描述】：

我与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);

?>
...
...

页面在这里：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）吗？

【问题讨论】：

How to apply CSS page-break to print a table with lots of rows?的可能重复
Aziz：也许我问过类似的问题，但我浏览了许多解决方案，它们使用相同的 CSS 选择器，但没有成功。

标签： html css printing html-table break

【解决方案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>

【讨论】：

【解决方案2】：

你应该在 : 之后使用分页符

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

和css样式：

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

【讨论】：

【解决方案3】：

我在您的样式表中更改了一条规则，它是这样工作的，至少在 Firefox 上是这样：

@page {
    size: 18cm 26.7cm;
    margin: 1.5cm;
}

所以我以厘米为单位定义了边距，并从页面大小中减去了边距。打印出来很好...

【讨论】：

感谢您的提示，但这不是最好的解决方案 - 页面较小，页面上的最后一行也被分割。
有没有办法，在这种情况下如何使用 page-break-**** 属性来解决我的问题？我已经尝试了很多组合，但对破坏没有影响。
这可能也取决于浏览器-您是否在其他浏览器上尝试过？
Johannes：我也试过了，但仍然没有令人满意的结果，类似于 Chrome 中的结果。我真的很想在最知名的浏览器（如 IE、Edge、Firefox、Chrome）上使用它。我说过，当我尝试使用“page-break-inside”和“page-break-after”（在@page{} 内、@media print{} 内、两者之外）时，它对我的桌子没有影响-> 页面底部的最后一行始终分为 2 页。
对不起，我真的不能多说，因为它在这里工作。为了尝试，我添加了tr {page-break-after: auto;}，但这给我带来了相同的结果（= 工作正常），所以我看不出有什么区别。