Geek Answers Handbook

Media prints multiple pages table-border-layout

When I print this, there is no border on the left and top of the table on the second page. How can i fix this?

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> @media print { body { margin: 0; padding: 0; color: #000000 !important; background-color: #ffffff !important; } * { color: inherit !important; background-color: transparent !important; background-image: none !important; } table { width: 100%; border: 1pt solid #000000; border-collapse: collapse; font-size: 11pt; } #space { height: 750px; } } </style> </head> <body> <br /><br /> <h2>.</h2> <div id="space"></div> <table border="1"> <thead> <tr><th>Amount</th><th>label</th></tr> </thead> <tbody> <tr><td>20</td><td>pineapple</td></tr> <tr><td>20</td><td>pineapple</td></tr> <tr><td>20</td><td>pineapple</td></tr> <tr><td>20</td><td>pineapple</td></tr> <tr><td>20</td><td>pineapple</td></tr> <tr><td>20</td><td>pineapple</td></tr> <tr><td>20</td><td>pineapple</td></tr> <tr><td>20</td><td>pineapple</td></tr> <tr><td>20</td><td>pineapple</td></tr> <tr><td>20</td><td>pineapple</td></tr> <tr><td>20</td><td>pineapple</td></tr> <tr><td>20</td><td>pineapple</td></tr> <tr><td>20</td><td>pineapple</td></tr> <tr><td>20</td><td>pineapple</td></tr> </tbody> </table> </body> </html>
+7
source share
2 answers

Change the style of the table so that something looks good:

  table { border: 1pt solid #000000; border-collapse: separate; border-spacing: 0; font-size: 11pt; width: 100%; }

Edit: To make something look perfect, first delete the entire border of the table, then define each style so that you want to have only one row along the border (create a border for th, td, tr):

  table { border-collapse: separate; border : 0px solid #000000; border-spacing: 0; font-size: 11pt; width: 100%; border-color: #000000 ; border-right: 1px solid; } tr { border-color: #000000 ; border-style: none ; border-width: 0 ; } td { border-color: #000000 ; border-left: 1px solid; border-bottom:1px solid ; } th { border-color: #000000 ; border-left: 1px solid; border-top:1px solid ; border-bottom:1px solid ; }
+5
source

Give the table border a border-width for the table to prevent clipping on the second and subsequent pages when your table has a folded border.

 <table style="border:1px solid black; margin:1px;"> <thead> <tr><th>Amount</th><th>label</th></tr> </thead> ....
0
source

More articles:


All Articles