I have a row of 5 tables, each with 100% height that displays correctly in the browser - the elements fill all available space. However, in print view, they do not stretch as desired.
https://i.sstatic.net/9d1cg.png
I am looking to have the table extend beyond the page break while maintaining the header. I attempted using a single table with one column, but due to varying card heights, it did not work properly. Any changes made, even unrelated ones, would disrupt the layout entirely.
Edit: Due to document size constraints, I cannot provide the full implementation, but here is a minimal example:
<style>
.flex {
display: flex;
gap: 1rem;
margin-top: 50vh;
}
table {
flex: 1;
}
.card {
padding: 0.5rem;
border-radius: 0.25rem;
background: lightblue;
}
</style>
<div class="flex">
<table>
<thead>
<tr>
<td>
<div style="background: red">COLUMN1</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="card">CARD</div>
</td>
</tr>
<!-- more cards -->
</tbody>
</table>
<!-- more tables [1..5] -->
</div>
In print view, the tables only expand to the total height of the cards inside, unlike in the browser where they are stretched.