Bootstrap 4 table with the scrollable body and header fixed
Can set fixed header by using position: sticky
.
Check the sample code.
Here set the height to the main container.
.table-responsive{height:400px;overflow:scroll;}
Set the postion sticky to the tr-> th.
thead tr:nth-child(1) th{background: white; position: sticky;top: 0;z-index: 10;}
add display:block
to the table to fix this
tbody{height: 400px; overflow-y: scroll;display:block;}
th { position: sticky; top: 0; }
Try using flex, it should be compatible with table-responsive
:
table {
display: flex;
flex-flow: column;
width: 100%;
}
thead {
flex: 0 0 auto;
}
tbody {
flex: 1 1 auto;
display: block;
overflow-y: auto;
overflow-x: hidden;
}
tr {
width: 100%;
display: table;
table-layout: fixed;
}
Hope this will help