I am encountering an issue while attempting to make the tbody section of an HTML table scrollable.
Consider this basic HTML table:
<table border="1" class="scrollableTable">
<thead>
<tr>
<th width="14.2%">RM Code</th>
<th width="14.2%">Author Signature</th>
<th width="14.2%">Signature Date</th>
<th width="14.2%">Acquisition Reserve</th>
<th width="14.2%">Final Delivery</th>
<th width="14.2%">RM Description</th>
<th width="14.2%">Taxable Amount</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>
// More rows ...
</tbody>
</table>
In the tbody section, there are multiple rows that could exceed the available height. To address this, I want to set a specific height for this section and make it scrollable to view all rows.
To achieve this, I applied these CSS settings:
Firstly, I changed the display of tbody to block in order to assign a height to it.
Next, I specified a height for the tbody section.
Finally, I added vertical overflow as scroll to enable scrolling within the tbody section.
This is the CSS code snippet:
tbody {
display: block;
height: 100px;
overflow-y: scroll;
}
Despite my efforts, the result does not align properly and looks messy. The columns in the tbody do not match with the thead.
Any insights on why this is happening? How can I rectify this issue?
Thank you