I am trying to create a table with first 3 columns fixed and the header also fixed. Rest columns as scrollable.
I can get first column fixed. But I am not able to make next two columns fixed as well.
I think I am missing some css property but I don't know what that is.
I have the code below.
<div class="c-current-table -primary">
<table>
<thead>
<tr>
<th class="pin"> </th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row Header</th>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
<td>Cell Data</td>
</tr>
</tbody>
</table>
.c-current-table {
.-primary {
overflow: auto;
scroll-snap-type: both mandatory;
height: 40vh;
width: 600px;
}
table {
border-collapse: collapse;
border: 0;
}
th,
td {
border: 1px solid #aaa;
background-clip: padding-box;
scroll-snap-align: start;
}
tbody tr:last-child th,
tbody tr:last-child td {
border-bottom: 0;
}
thead {
z-index: 1000;
position: relative;
}
th,
td {
padding: 0.6rem;
min-width: 6rem;
text-align: left;
margin: 0;
}
thead th {
position: sticky;
top: 0;
border-top: 0;
background-clip: padding-box;
}
thead th.pin {
left: 0;
z-index: 1001;
border-left: 0;
}
tbody th {
background-clip: padding-box;
border-left: 0;
}
tbody {
z-index: 10;
position: relative;
}
tbody th {
position: sticky;
left: 0;
}
thead th,
tbody th {
background-color: #f8f8f8;
}
}
Can someone please help?