On one of my pages, I have a table with dynamic width columns. Currently, the entire table scrolls horizontally if a column's width increases and causes overflow. However, I only want the body of the table to scroll vertically on overflow while keeping the header visible. The current implementation scrolls the entire table vertically.
Here is an example code snippet with dummy data mimicking my structure (jsfiddle link):
th,
td {
text-align: left;
padding: 5px;
outline: solid 0.5px;
}
table {
table-layout: auto;
width: 100%;
white-space: nowrap;
overflow-x: scroll;
overflow-y: scroll;
height: 100px;
display: block;
}
.container {
width: 300px;
}<div class="container">
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Name</th>
<th>Address</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Title 2</td>
<td>Jane Doe</td>
<td>dfss</td>
<td>sdffsffsfd</td>
<td>sfsfs</td>
<td>sfsff</td>
</tr>
<tr>
<td>Title 3</td>
<td>John Doe</td>
<td>sasas</td>
<td>eeeee</td>
<td>eEe</td>
<td>sfff</td>
</tr>
<tr>
<td>Title 4 is a long title</td>
<td>Name1</td>
<td>dfss</td>
<td>sdffsffsfd</td>
<td>sfsfs</td>
<td>sfsff</td>
</tr>
<tr>
<td>Title 5 is shorter</td>
<td>Name 2</td>
<td>dfsf</td>
<td>sdfsf</td>
<td>dfsf</td>
<td>sdfsf</td>
</tr>
<tr>
<td>Title 6</td>
<td>Name 3</td>
<td>sasas</td>
<td>eeeee</td>
<td>eEe</td>
<td>sfff</td>
</tr>
</tbody>
</table>
</div>I've explored various solutions on Stack Overflow but they all set fixed widths for columns and wrap content if it exceeds the width. The only solution that didn't completely disrupt my page was table with fixed thead and scrollable tbody, however, it resulted in different column widths for header and body columns.
All other solutions either use fixed column widths or rely on JavaScript/jQuery, which I prefer not to use unless absolutely necessary. Can anyone suggest an alternative approach?