Solved: First column of table to be sticky

jugarugabi · ‎02-11-2021

Hello,

So I am having a report in a panel that is having 65 columns.

Due to the fact that the first row contains an information that needs to be freezed when scrolling from left to right.

Now, I have tried the following approach:

<panel id="Scoring_Server_Totals_Day">
<html depends="$alwaysHideCSS$">
<style>
#Scoring_Server_Totals_Day { width:85% !important; font-size: 85%; }
#Table_Scoring_Server_Totals_Day div [data-view="views/shared/results_table/ResultsTableMaster"] td:nth-child(1) {
position: fixed;
}
#Table_Scoring_Server_Totals_Day div [data-view="views/shared/results_table/ResultsTableMaster"] th:nth-child(1) {
position: fixed;
}
</style>
</html>
<table id="Table_Scoring_Server_Totals_Day">
<title>Txns scored per server & instance today</title>
<search ref="Scoring Server Totals"></search>
<option name="count">50</option>
<option name="drilldown">none</option>
</table>
</panel>

However output is defective - it overlaps the Serv01:::1 details when it should've kept the "Scored" column separately.

Despite it works for the scrolling on left-to-right, it gets stuck even when scrolling up-to-down.

I have using position: sticky instead of position: fixed, but it ignores it and it fails to remain sticky when scrolling left-to-right.

Any idea what's wrong in the code?

Thanks,
Gabriel

ITWhisperer · ‎02-11-2021

#Table_Scoring_Server_Totals_Day th:first-child,td:first-child {
left: 0;
z-index: 9999;
position: sticky;
}

View solution in original post

ITWhisperer · ‎02-11-2021

Have you tried adding !important into the style so it doesn't get overridden? For example:

#Table_Scoring_Server_Totals_Day div [data-view="views/shared/results_table/ResultsTableMaster"] th:nth-child(1) {
position: fixed !important;
}

jugarugabi · ‎02-11-2021

@ITWhisperer yep, it tries to stay sticky, using only:

#Table_Scoring_Server_Totals_Day div [data-view="views/shared/results_table/ResultsTableMaster"] th:nth-child(1) {
position: fixed !important;
}

However, during the scrolling l-t-r the header vanishes behind the 2nd column and the speed isn't remaining sticky:

If I am adding:

#Table_Scoring_Server_Totals_Day div [data-view="views/shared/results_table/ResultsTableMaster"] td:nth-child(1) {
            position: fixed !important;
          }

underneath the previous code... I'm getting back to square one.

Even if I am removing "!important" from the position of td:nth-child(1), I still get the Scored column overlapping the Serv01.

ITWhisperer · ‎02-11-2021

#Table_Scoring_Server_Totals_Day th:first-child,td:first-child {
left: 0;
z-index: 9999;
position: sticky;
}

jugarugabi · ‎02-11-2021

@ITWhisperer you're a life saver.

Thanks a lot! It worked and now I have the results as expected.

First column of table to be sticky

CSS

panel

table

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor