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

I played around with page-break-inside:auto, page-break-inside:avoid, page-break-after:auto, margin-top and margin-bottom and others for quite a long time, but still can't find a solution how to break rows in my long HTML table, which is meant to be printed.

我玩过page-break-inside:auto,page-break-inside:avoid,page-break-after:auto,margin-top和margin-bottom等等很长一段时间,但仍然无法找到解决方案如何在我的长HTML表中打破行,这是打印的。

Page looks like the left screenshot in printing mode (or preview window before printing in Chrome):

页面看起来像打印模式下的左侧屏幕截图(或在Chrome中打印之前的预览窗口):

All I need to achieve is to break every row at the bottom of each page, which is going to be devided on two pages (and its content too..)

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

This is a piece of code of my page:

这是我的页面的一段代码:

...
<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 is here: http://student.spsbv.cz/krolop.el12a/mproj/components/tisk.php

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

As you can see, there is a problem, that my table "grows" dynamically depending on the count of data in my MySQL database, so it's hard to assign a specific row, where the table should be broken.

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

How to solve this?

怎么解决这个?

EDIT: The given solution (How to apply CSS page-break to print a table with lots of rows?) didn't fix my issue, is there any different way (using HTML and CSS)?

编辑:给定的解决方案(如何应用CSS分页符打印一个有很多行的表?)没有解决我的问题,是否有任何不同的方式(使用HTML和CSS)?

3 个解决方案

#1

Roberto Rossi is right (I can't add a comment due to reputation), but I also found this post with more information and it seems this is a potential duplicate question:

罗伯托罗西是对的(由于声誉我不能添加评论),但我也发现这篇文章有更多的信息,似乎这是一个潜在的重复问题:

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

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

EDIT:

Accepted Answer - User: Sinan Ünür

一般承认的答案 - 用户: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>

Supplemental Answer - User: Josh P

补充答案 - 用户:Josh P.

Note: when using the page-break-after:always for the tag it will create a page break after the last bit of the table, creating an entirely blank page at the end every time! To fix this just change it to page-break-after:auto. It will break correctly and not create an extra blank page.

注意:使用page-break-after时:总是对于标记,它会在表的最后一位之后创建一个分页符,每次最后创建一个完全空白的页面!要解决这个问题,只需将其更改为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>

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

3 个解决方案

#1

更多相关文章

随机推荐