HTML Table with fixed Thead and vertical scrollable Tbody — Logical implementation using CSS grid
In this post, I am going to describe how to implement HTML Table with fixed Thead and scrollable Tbody using CSS grid.
Let's first understand CSS grid layout.
CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids can be used to layout major page areas or small user interface elements.
For example- We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items.
HTML
<body class="grid-layout">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</body>CSS
.grid-layout{
display: grid;
}
.grid-layout > div{
border: 1px solid black
}
In the above example, All the direct children of “class=grid-layout” are now grid items.
Now let’s use the CSS grid to implement HTML Table with fixed Thead and vertical scrollable Tbody.
Example HTML code which has 5 columns and 7 data rows.
HTML
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1-0</td>
<td>row 1-1</td>
<td>row 1-2</td>
<td>row 1-3</td>
<td>row 1-4</td>
</tr>
<tr>
<td>row 2-0</td>
<td>row 2-1</td>
<td>row 2-2</td>
<td>row 2-3</td>
<td>row 2-4</td>
</tr>
<tr>
<td>row 3-0</td>
<td>row 3-1</td>
<td>row 3-2</td>
<td>row 3-3</td>
<td>row 3-4</td>
</tr>
<tr>
<td>row 4-0</td>
<td>row 4-1</td>
<td>row 4-2</td>
<td>row 4-3</td>
<td>row 4-4</td>
</tr>
<tr>
<td>row 5-0</td>
<td>row 5-1</td>
<td>row 5-2</td>
<td>row 5-3</td>
<td>row 5-4</td>
</tr>
<tr>
<td>row 6-0</td>
<td>row 6-1</td>
<td>row 6-2</td>
<td>row 6-3</td>
<td>row 6-4</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
<td>row 7-3</td>
<td>row 7-4</td>
</tr>
</tbody>
</table>1. First style <table> element with grid-layout structure by giving it display: grid style property. Immediate child items<thead> and <tbody> will now be considered grid items.
2. Now align table immediate child items in one column using grid-template-columns: 1fr and in two rows using grid-template-rows: 1.25rem 1fr.
3. <thead> will have 1.25rem as height and <tbody> will take rest available space with in <table>.
4. Now let’s align all <th> and <td> as grid items. To do this, we need to set its immediate parent container as a grid. We will do this by applying display: grid for <tr>.
5. Now let’s divide the grid into 5 equal-width columns using grid-template-columns: repeat(5, 1fr) property. Depending on our usecase, we can give each column specific width as well using grid-template-columns: 100px 200px 300px 400px 500px.
6. Now to make tbody vertical scrollable — we need to ensure it has overflow-y property set to auto and height is set to 100% to take available table height.
CSS
table{
display: grid;
grid-template-rows: 1.25rem 1fr; //1.25rem header height,1fr tbody
grid-template-columns: 1fr;
height: 150px
}tbody{
height: 100%;
overflow: auto;
}tr{
display: grid;
grid-template-columns: repeat(5, 1fr)
}td, th{
border-top: 1px solid grey;
}th{
background: #F74B33;
color: white
}
Thanks for taking the time to read this post. I hope you find it helpful