I have a table with 20 columns and 10 rows and a header row.
I want the header row, first three columns and last column to be sticky, sticky columns 100px width.
It seems table-layout fixed works with fixed column width, but does not prevent scrollable columns from overlapping.
The vertical scrolling works, but the horizontal scrollbar doesn't display.
The container div has a class "container), no other internal CSS. Appreciate any guidance on this
This is my html
CSS
I want the header row, first three columns and last column to be sticky, sticky columns 100px width.
It seems table-layout fixed works with fixed column width, but does not prevent scrollable columns from overlapping.
The vertical scrolling works, but the horizontal scrollbar doesn't display.
The container div has a class "container), no other internal CSS. Appreciate any guidance on this
This is my html
HTML:
<div class="container">
<table>
<thead>
<tr>
<th>Filler</th><th>Filler</th><th >Filler</th>
<th>Filler</th><th>Filler</th><th>Filler</th><th>Filler</th>
<th>Filler</th><th>Filler</th><th>Filler</th><th>Filler</th>
<th>Filler</th><th>Filler</th><th>Filler</th><th>Filler</th>
<th>Filler</th><th>Filler</th><th>Filler</th><th>Filler</th>
<th>Filler</th>
</tr>
</thead>
<tbody>
<tr>
<td>Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
<tr>
<td >Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
<tr>
<td>Filler</td><td>Filler</td><td>Filler</td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
<td>Filler</td>
</tr>
</tbody>
</table>
</div>CSS
CSS:
.container{
height: 300px;
width: 80%;
margin: auto;
overflow-y: scroll;
overflow-x: scroll;
position: relative;
border: solid;
}
table{
table-layout: fixed;
width: 100%;
border-spacing: 0;
}
th,td{
padding: 0;
text-align: center;
}
table thead th{
z-index: 1;
}
thead{
position: sticky;
top: 0;
background-color: white;
}
tr th{
width: auto;
margin: 0;
}
th:nth-child(-n+3),
th:last-child,
td:nth-child(-n+3),
td:last-child{
width: 100px;
position: sticky;
top: 0;
}
