topic Re: How to make first two columns and header of those two sticky in a table in Splunk Search

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

power12 — Thu, 03 Aug 2023 20:56:15 GMT

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

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

ITWhisperer — Thu, 03 Aug 2023 06:46:43 GMT

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

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

power12 — Thu, 03 Aug 2023 19:51:07 GMT

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

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

power12 — Thu, 03 Aug 2023 19:56:05 GMT

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>