JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<style>
</style>
</head>
<body>
<table>
<thead>
<tr class="headfoot"><td>header</td></tr>
</thead>
<tbody>
<tr>
<td class="fill">
<div id="content">
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
put lots of text here
</div>
</td>
...
CSS
table {
width: 50%;
height: 50%;
border-spacing: 0;
position:absolute;
}
td {
border: 1px solid black;
}
#content {
position:absolute;
width:100%;
left:0px;
top:20px;
bottom:20px;
overflow: hidden;
}
body{padding:2px;}