Table with Page Break overwriting fixed element

Asked

Viewed 338 times

0

I have a script from a legacy system that creates a table with the data coming from the php database. The script was developed to store everything in a $html tag and at the end give an echo.

At the end of this script there is a footer element with place for the employee to sign. Client asked that this footer be at the end of every page that is printed.

So far so good. I put the div with css below:

div.footer {
    position: fixed;
    bottom: 0;
}

and the table with the following configuration for page break if the "line" exceeds the end of the page:

table { page-break-inside:auto; margin-bottom: 10px; }
tr    { page-break-inside:avoid; page-break-after:auto; }
thead { display:table-header-group }
tfoot { display:table-footer-group }

Everything works nicely except for the fact that the footer element overwrites the last row of the table on certain pages where the table picks up the entire page height.

Is there any way to avoid that? I tried some forms with javascript and css but as the number of footer elements is one, even though it is printed in 3, 4, 5 pages, I still can’t get.

<html>
    <head>
        <style type="text/css" media="print">
            table { page-break-inside:auto; margin-bottom: 10px; }
            tr    { page-break-inside:avoid; page-break-after:auto; }
            thead { display:table-header-group }
            tfoot { display:table-footer-group }

            div.footer {
                position: fixed;
                bottom: 0;
            }
        </style>
    </head>

    <body>
        <table>
        ...
        </table>

        <div class='footer'>
        <label style='font-family:verdana;font-size:10px;font-weight:bold;'>Assinatura: _______________________________________________<br>Por ser verdade, assino e dou fé ao presente documento</label>
        <div id='pages' class='pages'></div>
    </div>  
    </body>
</html>

Exemplo

php html css

  • Dude I think I may have a solution for you, but edit your question put enough code so that I can at least simulate the problem you’re having there, without it can’t help you much

  • @hugocsl ok. Basically this is what I edited. The table is dynamically created in the database data looping. Out of this looping is the footer I put fixed at the time to print out on all sheets.

  • I published a solution to which you can adjust the values to be closer than you need

1 answer

0

Dude I have a solution for you, it is not a totally perfect solution, but it will solve the problem. you need that the height of the TD is greater than the height of div Footer, only that.

I also made this CSS rule to show the footer only when it’s printed, but you can treat it later, as you see fit.

div.footer {
    display: none;
}

@media print {
    div.footer {
        display: block;
        position: fixed;
        bottom: 0px;
        height: 45px;
    }
}

So you need to declare in hand one height to the TD, guy 60px, and the div footer than to have at most a few 45px, thus, the last TD page will always "break" to next page when there is no space for it, thus leaving a space of approximately 59px, just enough space to fit the footer that has 45px height understands :)

inserir a descrição da imagem aqui

table {
    page-break-inside: auto;
}

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

thead {
    display: table-header-group
}

th,
td,
div {
    border: 1px solid #000;
}

th,
td {
    height: 60px;
}

div.footer {
display: none;
}

@media print {
div.footer {
    display: block;
    position: fixed;
    bottom: 0px;
    height: 45px;
}
}
<table>
    <thead>
        <tr>
            <th>
                th
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
        <tr>
            <td>
                td
            </td>
        </tr>
    </tbody>

</table>

<div class='footer'>
    <label style='font-family:verdana;font-size:10px;font-weight:bold;'>Assinatura: _______________________________________________<br>Por ser verdade, assino e dou fé ao presente documento</label>
    <div id='pages' class='pages'></div>
</div>

  • It didn’t work out so well, man. The td has variable heights according to the number of data. I even applied the fixed height only in td from inside, below the header so as not to mess with the rest. The @media I specified in the opening of the <style>, that works the same way. If you have another idea I would appreciate.

  • @A52 guy in this case won’t be able to help you much

Browser other questions tagged php html css

You are not signed in. Login or sign up in order to post.