Solved: Re: 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

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics!

New in Observability Cloud - Explicit Bucket Histograms