I need to export two tables, each measuring 7cm×15cm, to a PDF file with A4 portrait paper size using the browser's "Save to PDF" option in the print tool.
My goal is to center these two tables vertically on the A4 paper. If that proves difficult, I would like them positioned at the same location on the page.
Currently, the tables are not placed exactly where I want them on the page (as shown in the image below).
The HTML code for the tables is as follows:
<body>
<!-- 1st table -->
<table>
<tr> <td>content of the first table</td>
<!-- additional tr's and td's -->
</tr>
</table>
<!-- 2nd table -->
<table>
<tr> <td>content of the second table</td>
<!-- additional tr's and td's -->
</tr>
</table>
</body>
Along with the following CSS rules:
table {width:7cm; height:15cm; border: 1px solid;
page-break-after: always;
margin: auto;
}
@media print {
@page { size: A4 portrait; }
}
The page-break-after: always; rule tells the browser to insert a page break after each table.
The margin: auto; rule horizontally aligns the tables on the page.
I require both tables to be printed on the same paper for a two-sided printing setup.
Current Output:
https://i.stack.imgur.com/3kTKq.png
Any assistance or suggestions would be greatly appreciated!