<!DOCTYPE html>
<style>
body { overflow: scroll; }
tr { break-inside:avoid; }
</style>
<div id="multicol" style="columns:4; column-fill:auto; column-gap:0; height:90px; line-height:20px; orphans:1; widows:1;">
<table style="width:50px;" cellspacing="0" cellpadding="0">
<thead style="break-inside:avoid;">
<!-- This is a table header that repeats in all columns the table occurs. -->
<tr data-offset-y="0" data-expected-height="20">
<td><br></td>
</tr>
</thead>
<tbody>
<tr data-offset-y="20" data-expected-height="60">
<td><br><br><br></td>
</tr>
<tr data-offset-y="110" data-expected-height="60">
<td><br><br><br></td>
</tr>
<tr data-offset-y="200" data-expected-height="60">
<td><br><br><br></td>
</tr>
</tbody>
<tfoot>
<tr data-offset-y="290" data-expected-height="60">
<td><br><br><br></td>
</tr>
</tfoot>
</table>
</div>
<script src="../resources/check-layout.js"></script>
<script>
checkLayout("#multicol");
</script>