I have a html file with a wide table. I want to be able to put it in a A4 size. The columns that exceed the A4 size should come below in a new table.
I tried using this the @page attribute, but it didn't change anything,
<style type="text/css"> @page { size: 21cm 29.7cm; margin: 30mm 45mm 30mm 45mm; } </style> Is there any third party js library that automatically does this? (The table size is not known before hand, the user uploads data and generates the table, so the number of columns is not fixed). {My end goal is to print this as a pdf, but I could not achieve this using the qprinter given in QT}
I have put a html file with long table here - link.
Thanks in advance
3 Answers
Answers 1
This appears to do what you want, if that is to place the printed pages side-by-side and read the entire table as it is on screen. It worked with the html you provided in your link, add this to your stylesheet (I only tested in Chrome)
@media print{ @page {size:landscape;} html{ -ms-transform: rotate(90deg);/* IE 9 */ -webkit-transform: rotate(90deg);/* Chrome, Safari, Opera */ transform: rotate(90deg); } table,h1,h2 {position:relative;left:4.5cm} } The key is rotating the content for print so it overflows "down" to the next page, then set size to landscape to rotate the paper, so you end up with left to right portrait oriented pages. Unfortunately I could not get the page to break between columns. But if you are posting all the printed pages up on a wall side-by-side it will be readable. The print preview will show all the pages turned 90 degrees, that's what you want, then select A4 as the paper size in the print dialog. I had to reposition the table and your headings because it was hanging off the left side of the first page, maybe because of all the nested divs with in-line styles?, I do not know, like I said this worked with your html.
Here is the printed as pdf file (I repeated your first row a couple more times in this example) https://www.dropbox.com/s/fjyns5gaa4jiky4/wide-table%20printed.pdf?dl=0
Answers 2
Table could not break its columns in a new row, all you can do is to make table width according to the paper width.
A4 page width in px is 2480 pixels x 3508 pixels.
so you will make max-width of table to 2480px so that it could not exceed the size of paper.
Let's guess your table id="table", then your style should be.
<style> #table{ max-width: 2480px; width:100%; } #table td{ width: auto; overflow: hidden; word-wrap: break-word; } </style> Answers 3
You should try to use divs rather than tables if you want to get good printable sheets. With <div> we have better control of the way its displayed. <div> can easily be styled unlike <table>,<tr>,<td>, etc.
Here is something I did :
CSS
@media print { @page { margin: 0; } body { height: 100%; width: 100%; } div.divTableRow > div { display: inline-block; border: solid 1px #ccc; margin: 0.1cm; font-size: 1rem; } div.divTableRow { display: block; margin: solid 2px black; margin: 0.2cm 1cm; font-size: 0; white-space: nowrap; } .divTable { transform: translate(8.5in, -100%) rotate(90deg); transform-origin: bottom left; display: block; } } .divTable { display: table; width: 100%; } .divTableRow { display: table-row; } .divTableHeading { background-color: #EEE; display: table-header-group; } .divTableCell, .divTableHead { border: 1px solid #999999; display: table-cell; padding: 3px 10px; width:100px; // set to a fixed value so as to get the table in the ordered manner. } .divTableHeading { background-color: #EEE; display: table-header-group; font-weight: bold; } .divTableFoot { background-color: #EEE; display: table-footer-group; font-weight: bold; } .divTableBody { display: table-row-group; } You may customize the same as necessary.
Fiddle : div-table-printable
You may convert your html with <table> to <div> using table-to-divs
Other references:
0 comments:
Post a Comment