Menu
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)?
347
To freeze the row/column we can use a simple HTML table and CSS. HTML: In HTML we can define the header row by <th> tag or we can use <td> tag also. Below example is using the <th> tag. We also put the table in DIV element to see the horizontal and vertical scrollbar by setting the overflow property of the DIV element.
In order to prevent a table to be split in several pages it is required to apply the page-break-inside and page-break-after styles to all of its contents. This trick works unless the table occupies more space than a full page.
Make sure all parent elements are display: block . Also consider overriding table , tr , td 's display styles with CSS grid for the print layout if you keep having issues with the table.
The expandable table can be achieved by using JavaScript with HTML. By Clicking on a row of the table, it expands and a sub-table pops up. When the user again clicks on that row the content will hide. This can be very useful when the data is complex but it is inter-related.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
