Bootstrap 4 Table With The Scrollable Body And Header Fixed

Question

I am new to front-end-development. Here I have the following table:

Solution 1:

Can set fixed header by using position: sticky.

Here set the height to the main container.

.table-responsive{height:400px;overflow:scroll;}

Set the postion sticky to the tr-> th.

theadtr:nth-child(1) th{background: white; position: sticky;top: 0;z-index: 10;}

Solution 2:

Try using flex, it should be compatible with table-responsive:

table {
    display: flex;
    flex-flow: column;
    width: 100%;
}

thead {
    flex: 00 auto;
}

tbody {
    flex: 11 auto;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

tr {
    width: 100%;
    display: table;
    table-layout: fixed;
}

Hope this will help

Solution 3:

add display:block to the table to fix this

tbody{height: 400px; overflow-y: scroll;display:block;}
th { position: sticky; top: 0; }

Solution 4:

use position : sticky at and top : 0

th {
  background: white;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
}

full example can be found here: https://css-tricks.com/position-sticky-and-table-headers/

JavaScript Test

Bootstrap 4 Table With The Scrollable Body And Header Fixed

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Bootstrap 4 Table With The Scrollable Body And Header Fixed"