Skip to main content
List Manager logo
List Manager Forum

Making header rows 'sticky'

User Alex King

Hi - is there a way of making the header row of a table 'sticky' so it doesn't scroll past the top when someone is scrolling down the table content? This would mean the header column titles were always visible when the user is viewing data in the lower parts of the table. I have tried the 'position: sticky' in the custom css but it doesn't seem to have any effect.

Moonsoft support

Hi,
there is no simple way to set bootstrap responsive tables with sticky header, but you can try to add this css section in order to have the sticky header into a table adding a maximum height, something like:

thead {
position: sticky;
top: 0;
z-index: 10;
background-color: #fff;
}

table.table{
overflow-y: auto !important;
max-height: 600px;
display: grid;
}

Hope this helps, regards
Silvia Martín
Moonsoft Team

User Alex King

Perfect thankyou - exactly what we were looking for thanks!

...
Support/development 10 hours

Get a bigger amount of hours for more complex tasks and get a 10% discount

Buy now!
...
Support/development 40 hours

With the peace of mind of having a professional team at your service (20% discount)

Buy now!