While working on updating my HTML tables to have fixed headers, I followed online examples that suggest making table-layout fixed, thead and tbody blocks, setting height constraints for tbody, and applying overflow-y to tbody. The result is functional as my data scrolls while the headers remain in place.
One issue arises when the number of columns causes the width to exceed the viewport, resulting in two unexpected horizontal scrollbars. Despite not setting overflow or overflow-x specifically, there are two horizontal scrollbars - one for the tbody only and another for the entire table. Scrolling with the tbody scrollbar shows all the data but misaligns the headers, and scrolling with the table scrollbar cuts off data beyond the original viewport due to a vertical scrollbar where the initial edge of the viewport was.
My project involves an older version of Vuetify (which cannot be upgraded), but I have isolated the problem and recreated it through a simple HTML/CSS example found here. Can anyone provide insight into the source of these horizontal scrollbars? While I do want a single horizontal scrollbar, likely for the entire table, I want it to control both the data and headers. Removing the tbody scrollbar may achieve this goal, but since I did not define it anywhere, I am unsure how to eliminate it. Even the inspector does not display overflow-x anywhere! I have attempted adding overflow-x to different elements to trigger a scrollbar and prevent these automatic ones from appearing, but so far, no success.
Thank you in advance for any advice!
Sample CSS:
table {
table-layout: fixed;
width: 100%;
}
thead tr, tbody {
display: block;
}
tbody {
height: 300px;
overflow-y: auto;
}
th, td {
width: 100px;
min-width: 100px;
}
Sample HTML:
<html>
<div style="max-width: 500px; overflow-y: auto;">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<td>Data5</td>
<td>Data6</td>
<td>Data7</td>
<td>Data8</td>
<tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<td>Data5</td>
<td>Data6</td>
<td>Data7</td>
<td>Data8</td>
<tr>
<!-- more rows to make it scroll vertically -->
</tbody>
</table>
</div>
</html>