How to make first two columns and header of those ...

power12 · ‎08-02-2023

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

ITWhisperer · ‎08-02-2023

          #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.

power12 · ‎08-03-2023

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>

power12 · ‎08-03-2023

@ITWhisperer I tried the code but while scrolling I see only second column moving to right while scrolling to right

How to make first two columns and header of those two sticky in a table?

Index This | What is broken 80% of the time by February?

Unlock Faster Time-to-Value on Edge and Ingest Processor with New SPL2 Pipeline ...

Splunk MCP & Agentic AI: Machine Data Without Limits

Join the Conversation

How to make first two columns and header of those two sticky in a table?

Index This | What is broken 80% of the time by February?

Unlock Faster Time-to-Value on Edge and Ingest Processor with New SPL2 Pipeline ...

Splunk MCP & Agentic AI: Machine Data Without Limits