<!DOCTYPE html>
<style>
.header {
background-color: blue;
height: 60px;
}
thead, tfoot {
break-inside: avoid;
}
</style>
<p>crbug.com/759195: Headers and footers should be placed correctly.</p>
<div id="multicol" style="display:none; columns:3; column-fill: auto; height:412px; background-color: yellow;">
<table cellpadding=0 cellspacing=0>
<thead>
<tr>
<td>
<div class="header">
HEADER
</div>
</td>
</tr>
</thead>
<tbody>
<tr><td><div style="height: 210px; width: 1px;"></div></td></tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="line-height: 20px; width: 200px;">
<thead>
<td style="width:64px"><strong>Col 1</strong></td>
<td style="width:80px"><strong>Col 2</strong></td>
<td style="width:75px"><strong>Col 3</strong></td>
<td style="width:95px"><strong>Col 4</strong></td>
<td style="width:115px"><strong>Col 5</strong></td>
</thead>
<tbody>
<tr>
<td style="height:40px">0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td style="height:40px">0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td style="height:40px">0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td style="height:40px">0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td style="height:40px">0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td style="height:40px">0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td style="height:40px">0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td style="height:40px">0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td style="height:40px">0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div class="header">
FOOTER
</div>
</td>
</tr>
</tfoot>
</table>
</div>
<script>
// Avoid crbug.com/1254935
multicol.style.display = "block";
</script>
Codebase Browser
chromium