- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
How to make first two columns and header of those two sticky in a table?
power12
Communicator
08-02-2023
03:03 PM
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
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
ITWhisperer

SplunkTrust
08-02-2023
11:46 PM
#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.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
power12
Communicator
08-03-2023
12:56 PM
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>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
power12
Communicator
08-03-2023
12:51 PM
@ITWhisperer I tried the code but while scrolling I see only second column moving to right while scrolling to right
