Menu
I have a project which requires printing an HTML table with many rows.
My problem is the way the table is printed over multiple page. It will sometimes cut a row in half, making it unreadable because one half is on the bleeding edge of a page and the remainder is printed on the top of the next page.
The only plausible solution I can think of is using stacked DIVs instead of a table and force page-breaks if needed.. but before going through the whole change I thought I could ask here before.
476
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. It is also possible to use custom styles.
document. write('<html><head><title>Table Contents</title>'); //Print the Table CSS. var table_style = document.
To make an HTML table tit the screen: Set the width to 100%, so that your code will look like this: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>My html table is set to fit the screen</td> </tr> ...
<!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> 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
