Fatal编程技术网
  • html/
  • HTML、CSS-长表的换行需要修复

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

html css printing

HTML、CSS-长表的换行需要修复,html,css,printing,html-table,break,Html,Css,Printing,Html Table,Break,我在内部分页符：auto、内部分页符：avoid、后面分页符：auto、页边距顶部和页边距底部等方面玩了很长一段时间，但仍然找不到一个解决方案，即如何在要打印的长HTML表中拆分行 页面看起来像打印模式下的左侧屏幕截图（或使用Chrome打印前的预览窗口）： 我所需要做的就是在每一页的底部打断每一行，这将被分为两页（以及它的内容） 这是我页面的一段代码： ... <style> table, th, td { border: 1px solid black; bor

我在
内部分页符：auto、内部分页符：avoid、后面分页符：auto、页边距顶部和页边距底部
等方面玩了很长一段时间，但仍然找不到一个解决方案，即如何在要打印的长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);

?>
...
...

。。。
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
td{左填充：15px；右填充：15px；}
@媒体印刷品{
netisk先生{
可见性：隐藏；
}
}
@页面{
尺寸：21厘米29.7厘米；
边际：0px；
}
身体{
左边距：1厘米；
右边距：1cm；
}
...
...
...

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


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



因此，我定义了以厘米为单位的边距，并从页面大小中减去这些边距。打印出来很好…
您应该在以下情况下使用分页符：


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


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



编辑：

接受答案-



试验
表{内部分页符：自动}
tr{内部分页符：避免；后面分页符：自动}
thead{display:table header group}
tfoot{display:table footer group}
标题
笔记
x
x
x


补充答案-

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



@媒体印刷品
{
表{page break after:auto}
tr{内部分页符：避免；后面分页符：自动}
td{内部分页符：避免；后面分页符：自动}
thead{display:table header group}
tfoot{display:table footer group}
}
....

Aziz的可能重复：也许我问了一个类似的问题，但我浏览了许多解决方案，它们使用相同的CSS选择器，但没有成功。谢谢你的提示，但这不是最好的解决方案-页面更小，页面的最后一行也被划分。有没有办法，在这种情况下如何使用分页符-****属性，解决我的问题？我在很多组合中都试过了，但没有效果。这可能还取决于浏览器-你在其他浏览器上试过吗？约翰尼斯：我也试过，但仍然没有让我满意的结果，类似于在Chrome上的结果。我真的很想让它在所有最知名的浏览器（如IE、Edge、Firefox、Chrome）上运行。如何，我说，当我尝试“内部分页符”和“之后分页符”（内部@page{}，内部@media print{}，外部两者）时，它对我的表没有影响->页面底部的最后一行总是分为两页。对不起，我真的不能说太多了，因为它在这里工作。为了尝试，我添加了
tr{page break after:auto；}
，但这给我带来了相同的结果（=工作正常），所以我看不出有什么不同。

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



<!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>



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