HTML, CSS - Row break for long table needs a fix

Asked 9/4, 2016 at 17:9 Answered 27/3, 2023 at 11:45

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 looks like the left screenshot in printing mode (or preview window before printing in 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

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.

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

Strunk answered 9/4, 2016 at 17:9 Comment(2)

Possible duplicate of How to apply CSS page-break to print a table with lots of rows? – Ruttish 9/4, 2016 at 17:38

Aziz: Maybe I've asked a similar question, but I browsed for many solution, which are using the same CSS selectors, but without success. – Strunk 9/4, 2016 at 17:50

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

EDIT:

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

Supplemental Answer - User: 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.

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

Hendley answered 5/7, 2018 at 22:54 Comment(0)

I'm solve it by this:

tr { page-break-inside:avoid; page-break-after:auto; }

Bola answered 27/3, 2023 at 11:45 Comment(1)

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Flyspeck 1/4, 2023 at 4:39

I changed one rule in your stylesheet, it works that way, at least here on Firefox:

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

So I defined the margin in centimeters and subtracted those from the page size. Printed out fine...

Ascetic answered 9/4, 2016 at 17:54 Comment(5)

Thank you for your tip, but it's not the best solution - page is smaller and last row on page is also divided. – Strunk 9/4, 2016 at 18:8

Is there a way, how to use that page-break-**** property in this case, to solve my issue? I've tried that in many combinations, but without effect on the breaking. – Strunk 9/4, 2016 at 18:15

It probably also depends on browsers - have you tried it with other browsers? – Ascetic 10/4, 2016 at 0:27

Johannes: I also tried that, but still no satisfiable result for me, similar result like in Chrome. I'd really like to have this working on all from the most known browsers (like IE, Edge, Firefox, Chrome). How, I said, when I experimented with 'page-break-inside' and 'page-break-after' (inside @page{}, inside @media print{}, outside them both) , it had no effect on my table -> last row at the bottom of the page was always devided on 2 pages. – Strunk 10/4, 2016 at 14:43

Sorry, I really can't say much more, since it works here. To try, I added tr {page-break-after: auto;}, but this brings the same result for me (= working okay), so I see no difference. – Ascetic 10/4, 2016 at 15:21

You should use page break after :

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

and css style :

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

Carrasquillo answered 11/6, 2018 at 16:23 Comment(0)

Recommended topics

Hot tags