<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus quibusdam nostrum quo tempore veritatis magnam similique nisi quis enim soluta, cupiditate officiis. Voluptate eligendi dolor earum ipsam obcaecati? Placeat.</p>
<table>
<thead>
<tr>
<th>Header Cell</th>
<th>Header Cell</th>
<th>Header Cell</th>
<th>Header Cell</th>
<th>Header Cell</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer Cell</th>
<th>Footer Cell</th>
<th>Footer Cell</th>
<th>Footer Cell</th>
<th>Footer Cell</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Row Header</th>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
</tbody>
</table>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus quibusdam nostrum quo tempore veritatis magnam similique nisi quis enim soluta, cupiditate officiis. Voluptate eligendi dolor earum ipsam obcaecati? Placeat.</p>
table {
border-collapse: collapse;
}
th,
td {
padding: 1rem;
}
thead,
tfoot {
background: #eee;
}
thead {
position: sticky;
top: 0;
border-bottom: 2px solid #ccc;
}
tfoot {
position: sticky;
bottom: 0;
border-top: 2px solid #ccc;
}
body {
font: 110%/1.4 system-ui;
margin: 0;
padding: 10rem 2rem 50rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.