Menu
I have two tables of size 7cm×15cm that I want to export to a pdf file, of A4 portrait paper size, using the browser's "Save to PDF" option in its print tool.
Ideally, I want to vertically center the two tables on the A4 paper. But if that is not possible to do, I would like them to be positioned on the same place in the page.
At the moment, for some reason, the two tables are not positioned at the exact place on the page, as I want them to (see in the image below).
The html code is the following:
<body>
<!-- 1st table: -->
<table>
<tr> <td>content of the first table</td>
<!-- some other tr's and td's -->
</tr>
</table>
<!-- 2nd table: -->
<table>
<tr> <td>content of the second table</td>
<!-- some other tr's and td's -->
</tr>
</table>
</body>
together 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 instructs the browser to insert a page break after the table;
The margin: auto; rule horizontally aligns the tables on the canvas.
I need to print the two tables on the same paper, in a two-sided printing, so that the tables are printed just behind each other.
What I have at the moment:
Any help would be much appreciated!
703
To place an item at the top or bottom of its cell, insert the "VALIGN=" attribute within the code for that cell. To vertically align an entire row (e.g., placing all data in that row at the tops of the cells), insert the "VALIGN=" attribute within the code for that row.
So, use CSS to align text in table cells. The text-align will be used for the <td> tag. We're using the style attribute for adding CSS. The style attribute specifies an inline style for an element.
So I found the fix without javascript. Change your media for print to this:
@media print {
body {margin-top:0 !important;}
@page { size: A4 portrait; }
}
Edit for centering the tables:
You have to wrap the tables in a div like this:
<body>
<!-- 1st table: -->
<div class="page">
<table>
<tr> <td>content of the first table</td>
<!-- some other tr's and td's -->
</tr>
</table>
</div>
<!-- 2nd table: -->
<div class="page">
<table>
<tr> <td>content of the second table</td>
<!-- some other tr's and td's -->
</tr>
</table>
</div>
</body>
Then in the css add this for flex display:
@media print {
body {margin-top:0 !important;}
.page{
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
@page {
size: A4 portrait;
}
}
And it should be centered and all now.
141
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
