How can I obtain a scrollable tbody section into an HTML table? - html

Question

I have the following problem trying to make scrollable the tbody section of an HTML table.
So for example I have this simple HTML table:
<table border="1" class="scrollableTable">
<thead>
<tr>
<th width="14.2%">Codice RM</th>
<th width="14.2%">Autore Firma</th>
<th width="14.2%">Data Firma</th>
<th width="14.2%">Acq Riserva</th>
<th width="14.2%">Consegna Finale</th>
<th width="14.2%">Descrizione RM</th>
<th width="14.2%">Imponibile</th>
</tr>
</thead>
<tbody>
<tr class="even" id="rmRow">
<td width="14.2%">0001</td>
<td width="14.2%">bla</td>
<td width="14.2%">00000000</td>
<td width="14.2%">bla</td>
<td width="14.2%">bla</td>
<td width="14.2%">19/09</td>
<td width="14.2%">57.0</td>
</tr>
<tr class="even" id="rmRow">
<td width="14.2%">0002</td>
<td width="14.2%">bla</td>
<td width="14.2%">00000000</td>
<td width="14.2%">bla</td>
<td width="14.2%">bla</td>
<td width="14.2%">19/09</td>
<td width="14.2%">57.0</td>
</tr>
<tr class="even" id="rmRow">
<td width="14.2%">0003</td>
<td width="14.2%">bla</td>
<td width="14.2%">00000000</td>
<td width="14.2%">bla</td>
<td width="14.2%">bla</td>
<td width="14.2%">19/09</td>
<td width="14.2%">57.0</td>
</tr>
<tr class="even" id="rmRow">
<td width="14.2%">0004</td>
<td width="14.2%">bla</td>
<td width="14.2%">00000000</td>
<td width="14.2%">bla</td>
<td width="14.2%">bla</td>
<td width="14.2%">19/09</td>
<td width="14.2%">57.0</td>
</tr>
<tr class="even" id="rmRow">
<td width="14.2%">0005</td>
<td width="14.2%">bla</td>
<td width="14.2%">00000000</td>
<td width="14.2%">bla</td>
<td width="14.2%">bla</td>
<td width="14.2%">19/09</td>
<td width="14.2%">57.0</td>
</tr>
<tr class="even" id="rmRow">
<td width="14.2%">0006</td>
<td width="14.2%">bla</td>
<td width="14.2%">00000000</td>
<td width="14.2%">bla</td>
<td width="14.2%">bla</td>
<td width="14.2%">19/09</td>
<td width="14.2%">57.0</td>
</tr>
</tbody>
</table>
As you can see in the tbody section there are some rows. These rows could be many so I want that this section have a specific heightand that it is scrollable (so I can see all the rows).
So I add these CSS settings trying to do it:
First I set the tbody section as a block so I can set an height to it.
Then I set an height to the tbody section.
Finally I set the verical overflow as scroll to make scrollable my tbody section.
This is my CSS code:
tbody {
display: block;
height: 100px;
overflow-y: scroll;
}
But this is what I obtain:
JSFiddle link: http://jsfiddle.net/AndreaNobili/4v1xnwzo/2/
HTML result: http://jsfiddle.net/AndreaNobili/4v1xnwzo/2/embedded/result/
As you can see the final result is pretty horrible and the tbody columns don't match wuth the thead columns.
Why? What am I missing? How can I solve this issue?
Tnx

Answer 1

The cells in your tbody will only line up with the cells in the thead if it has display: table-row-group;. Thus we can't set a height on the tbody, so we have to find a workaround.
The table itself can have overflow-y: scroll;, which gives us the scrolling for the rows in tbody, but unfortunately also includes scrolling the thead. You can avoid this behaviour by fixed positioning thead. and manipulating the way its displayed a little to make it look static at the top of the table while the rest of the table scrolls.
I've updated your JSFiddle with the css below:
tbody {
margin-top: 40px;
}
table {
display: block;
height: 100px;
overflow-y: scroll;
position: relative;
margin-top: 50px;
}
thead {
background: white;
position: fixed;
top: 0;
margin-right: 25px;
display: table-row-group;
}
th, td {
width: 80px;
}