JSFiddle - React, Tailwind, and code Playground

by Rene van der Lende

HTML

<table id="wrapper">
    <thead>
    <tr>
        <td id="header">HEADER TEXT</td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="https://unsplash.it/200?image=031" />
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            Welcome
            <h1>NEXT PAGE</h1>
            just one line
        </td>
    </tr>
    </tbody>
    
</table>

CSS

html,body { height: 100%; width: 100%; overflow: hidden }

#wrapper {
    position: relative;
    height: 95%; width: 100%;
}
#wrapper #header {
    position: absolute;
    top: 0;
    height: 100px;
}
#wrapper #content {
    position: absolute;
    top: 100px;
}
#wrapper #footer {
    position: absolute;
    bottom: 0;
}

@media print {
    h1 {
      page-break-before: always;
    }

    @page {
      size: A4;
      margin: 0;
    }
}