Tag: Scrollable Body

Posted on

SB Admin PHP – Fixed Table Header with Scrollable Body

Hi guys,

This question was raised to me recently and it peeked my interest to solve and find out how to do this. After digging around i found 2 working codes for my case.

To explain further my tables are generated dynamically so the column widths and gaps differ by each refresh of the table

There are the 2 options that i found

////////////// OPTION 1 //////////////////////
table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }

table width=”100%” class=”table table-striped table-hover” id=”dataTables-example”
////////////// OPTION 2 //////////////////////
table {
overflow-y: auto;
height: 10vh;
}
thead th {
position: sticky;
top: 0;
}

table width=”100%” class=”table table-striped table-hover” id=”dataTables-example”

Hope this code helps out somebody out there. If you have any questions, just drop me a line.

Coffee Cup