Table With Fixed Header And Scrolling Table Body Doesn't Let Tbody Scroll

I have a bootstrap v.4 table and want to have a fixed header with a scrolling table body. The Size of the table should remain at all time lets say 100px in height and width = auto.

Solution 1:

Try this:

.table-fixed{
  width: 100%;
  background-color: #f3f3f3;
  tbody{
    height:200px;
    overflow-y:auto;
    width: 100%;
    }
  thead,tbody,tr,td,th{
    display:block;
  }
  tbody{
    td{
      float:left;
    }
  }
  thead {
    tr{
      th{
        float:left;
       background-color: #f39c12;
       border-color:#e67e22;
      }
    }
  }
}

HTML code:

<divclass="container"><tableclass="table table-fixed"><thead><tr><thclass="col-xs-3">First Name</th><thclass="col-xs-3">Last Name</th><thclass="col-xs-6">E-mail</th></tr></thead><tbody><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr><tr><tdclass="col-xs-3">John</td><tdclass="col-xs-3">Doe</td><tdclass="col-xs-6">johndoe@email.com</td></tr></tbody></table></div>

Please check out the CodePen : https://codepen.io/anon/pen/OpVORa

Solution 2:

The simplest way to do it, with other css implemented, is to use two tables, one just for the header, the other for the body, with scroll. Something like this :

<tableclass="table tex-sm"><theadclass="thead-dark"><tr><th>Data</th><th>Nume</th><th>Document</th><th>Optiuni</th></tr></thead></table><divclass="list-container-h30 scrolled-y"><tableclass="table table-striped table-hover text-sm"><tbody><tr><td></td><td></td><td></td><td></td></tr></tbody></table></div>

Needless to say that the div containing the second table has fixed height, in this case, 30%, and scroll just for the Y axe.

This is what I'm using and it's the simplest and effective setup anyone can do.