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

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

?>
...
...

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

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

如何解决这个问题？

编辑：给定的解决方案（How to apply CSS page-break to print a table with lots rows?）没有解决我的问题，有什么不同的方法（使用 HTML 和 CSS）吗？

Answer 1

Roberto Rossi 是对的（由于声誉原因我无法添加评论），但我也发现这篇文章提供了更多信息，这似乎是一个潜在的重复问题：

打印大型 HTML 表格时如何处理分页符

编辑：

已接受的答案 - 用户：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>

补充答案 - 用户：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

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

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

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

Answer 3

你应该在 :

之后使用分页符

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

和CSS样式：

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

Answer 4

我是这样解决的：

tr { 内页中断：避免；分页后：自动； }

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

问题描述投票：0回答：4

4个回答

最新问题

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

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4