I am trying to make first two columns of a table output to be sticky...I can do one by using
<html>
<style>
#myTable th:first-child,td:first-child {
left:0;
z-index: 9999;
position: sticky;
}
The above code works for one column on the left..But I want two to be sticky
#myTable th:nth-child(2), td:nth-child(2){
left: 60px !important;
position: sticky;
z-index: 9998;
}
The left position has to take into account the width of the first column + two lots of padding. You may also find that it may depend on the screen resolution being used.
This worked.
<html>
<style>
#myTable th:first-child,td:first-child {
left:0;
z-index: 9999;
position: sticky;
}
#myTable th:nth-child(2), td:nth-child(2){
left: 110px !important;
position: sticky;
z-index: 9998;
}
</style>
</html>
@ITWhisperer I tried the code but while scrolling I see only second column moving to right while scrolling to right