I am encountering an issue while attempting to print tables and an image on separate pages.
Every time I print, an additional page spills over into a third page, causing overflow. How can I eliminate this extra space or overflow that results in a third page when printing?
I have previously tried adding page breaks before and after in various locations to resolve this problem, but have not been successful.
Since the tables change in size due to the data they contain, but never exceed a page, the image on the second page needs to accommodate this variability while remaining on the second page. I have struggled with this issue. I attempted using absolute positioning to keep it fixed, but it still shifts when the table size changes, sometimes extending to a third page.
Any suggestions or advice would be greatly appreciated. Thank you.
HTML:
<body>
<!-- The table content is inserted here -->
<hr class="break">
<div class="second">
<img src="/vessellog.png" class="dlog">
</div>
</body>
</html>
CSS:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styletable.css">
<style>
table tbody tr:not(.no-counter) {
counter-increment: rowNumber;
}
table tbody tr:not(.no-counter) td:nth-child(1)::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
.headingTable {
height: 150px;
font-size: 12px;
width: 100%;
}
.tableWrapper {
width: 100%;
border-collapse: collapse;
}
.second {
transform: rotate(270deg);
margin-left: 180px;
margin-top: -60px;
width: 720px;
height: 1080px;
position: absolute;
}
.dlog {
max-width: 100%;
max-height: 100%;
}
.break {
page-break-after: always;
}
</style>
</head>