Sometimes, we want to make let a table’s body scroll but keep its head fixed in place with CSS.
In this article, we’ll look at how to make let a table’s body scroll but keep its head fixed in place with CSS.
How to make let a table’s body scroll but keep its head fixed in place with CSS?
To make let a table’s body scroll but keep its head fixed in place with CSS, we set the overflow property.
For instance, we write
<style type="text/css">
table {
border-spacing: 0;
}
tbody {
height: 4em;
overflow-x: hidden;
overflow-y: auto;
}
td {
border-left: 1px solid blue;
border-bottom: 1px solid blue;
}
</style>
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
</tr>
<tr>
<td>Cell 8</td>
</tr>
</tbody>
</table>
to add a table with some styles.
We add border-spacing: 0; with overflow-y: auto; to let us scroll vertically.
Conclusion
To make let a table’s body scroll but keep its head fixed in place with CSS, we set the overflow property.
