Fix table header and add vertical scrollbar using CSS and JavaScript

[493669]

Hi All,

I want to display 100 rows results in table per page with vertical scrollbar and fix the header when we move down.
I am trying to use overflow-y: scroll; on div. so it shows vertical scrollbar but it is showing 10 rows per page with header is not fixed.

can any one please help me...
Thanks.

[niketn]

@493669, The current work around with CSS that I proposed was to fix the Table header while you use Splunk's UI scroll. You obviously noticed the issue with this approach (but this was the quickest change/not the easiest though, that I could think of). So, let me convert to comment again. So that others can pick this up meanwhile if I can spend some time on it with one of the workarounds I proposed.

[493669]

Here on every page of table I want to display 100 records with enabled vertical scrollbar .
and when I scroll down the first row should remain fixed .
Here I am using below js:
div#tableid{
overflow-y: scroll;
}

[493669]

can anyone suggest on this?

[niketn]

@493669, I have converted your answer to comment so that this question flags as unanswered for others. I don't think simply changing CSS will get you what you want. Rather it would be an extension to table renderer. I have not been able to get this to work. Will updated if I get a solution before the others.

[493669]

thanks @niketnilay
yes with CSS , we need to change js also..

[493669]

Hi,
Can any one suggest whether is it possible in Splunk?

[493669]

can anyone suggest on this?

[niketn]

@493669, can you please add your current CSS override as to where you have applied overflow-y: scroll;.
Adding a screenshot of what you have vs what you want will also help.

[493669]

Hi @niketnilay,

I have applied below js:-
div#tableid{
overflow-y: scroll;
}

I am not able to add screenshot

[493669]

I have applied below js on div:-
div#multiselect {
overflow-y: scroll;
}