Row head sticky not working when change some column sticky - html

Question

In previous table's row head sticky was working well. Then I did some changes to the first and second columns fixed. Then after row head sticky is not working. I can not find where I was wrong. I added my code below.
CSS -->
.view {
margin: auto;
width: 100%;
}
.wrapper {
position: relative;
overflow: auto;
white-space: nowrap;
}
.sticky-col {
position: sticky;
position: -webkit-sticky;
background-color: white;
z-index:1;
}
.first-col {
width: 100px;
min-width: 100px;
max-width: 100%;
left: 0px;
}
.second-col {
width: 150px;
min-width: 150px;
max-width: 100%;
left: 100px;
}
th {
background: white;
position: sticky;
top: 0;
}
Table -->
<div class="view">
<div class="wrapper">
<table>
<thead>
<tr>
<th class="sticky-col first-col">Col 1</th>
<th class="sticky-col second-col">Col 2</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-col first-col"></td>
<td class="sticky-col second-col"></td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
I have added below CSS to do row head stick in main.handlerbars.
th {
background: white;
position: sticky;
top: 0;
}
If you can give me a fix to solve this will be a huge help. Thank you.

Answer 1

You need to increase the z-index of the sticky left elements. Since you made all the element to be sticky, the latter ones will overlap the previous ones:
.view {
margin: auto;
width: 100%;
}
.wrapper {
position: relative;
overflow: auto;
white-space: nowrap;
height:100px;
}
.sticky-col {
position: sticky;
position: -webkit-sticky;
background-color: white;
}
.first-col {
width: 100px;
min-width: 100px;
max-width: 100%;
left: 0px;
}
.second-col {
width: 150px;
min-width: 150px;
max-width: 100%;
left: 100px;
}
th {
background: white;
position: sticky;
top: 0;
}
th.sticky-col {
z-index:1;
}
<div class="view">
<div class="wrapper">
<table id="app" class='table table-bordered table-sm'>
<thead>
<tr>
<th class="sticky-col first-col">Product</th>
<th class="sticky-col second-col">Description</th>
<th>Lorem ipsum dolor sit amet, consectetur</th>
<th>Lorem ipsum dolor sit amet, consectetur</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-col first-col">consectetur </td>
<td class="sticky-col second-col">consectetur </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
</tr>
<tr>
<td class="sticky-col first-col">consectetur </td>
<td class="sticky-col second-col">consectetur </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
</tr>
<tr>
<td class="sticky-col first-col">consectetur </td>
<td class="sticky-col second-col">consectetur </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
</tr>
<tr>
<td class="sticky-col first-col">consectetur </td>
<td class="sticky-col second-col">consectetur </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
</tr>
</tbody>
</table>
</div>