<div class="wrap">
<div class="block1">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Итого</td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
<div class="block2">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Итого</td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
<div class="block2 result">
<table>
<thead>
<tr>
<th>result</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr class='table-row'>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class='table-row'>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="spacer"></tr>
</tbody>
<tfoot>
<tr>
<td>Итого</td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</div>
.block1
border: 1px solid red
width: 300px
height: 100px
padding: 10px
overflow: auto
.block2
border: 1px solid red
width: 300px
height: 300px
padding: 10px
overflow: auto
th, td
border: 1px solid blue
table
width: 100%
height: 100%
border-collapse: collapse
tfoot
position: sticky
bottom: 0
background: #fff
.table-row
height: 20px
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.