Table fixed header and scrollable body

Question

I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table  Unfortunately the solutions I have found does not work with bootstrap or mess up the style   Here there is a simple bootstrap table  but for some reason to me unknown the height of the tbody is not 10px   height  10px  important  overflow  scroll    Example    x000D   x000D   lt link rel  stylesheet  type  text css  href    netdna bootstrapcdn com bootstrap 3 0 3 css bootstrap min css  gt  x000D   x000D   lt table class  table table-striped  gt  x000D       lt thead gt  x000D       lt tr gt  x000D           lt th gt Make lt  th gt  x000D           lt th gt Model lt  th gt  x000D           lt th gt Color lt  th gt  x000D           lt th gt Year lt  th gt  x000D       lt  tr gt  x000D       lt  thead gt  x000D       lt tbody style  height  10px  important  overflow  scroll    gt  x000D       lt tr gt  x000D           lt td class  filterable-cell  gt 111 Ford lt  td gt  x000D           lt td class  filterable-cell  gt Escort lt  td gt  x000D           lt td class  filterable-cell  gt Blue lt  td gt  x000D           lt td class  filterable-cell  gt 2000 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td class  filterable-cell  gt Ford lt  td gt  x000D           lt td class  filterable-cell  gt Escort lt  td gt  x000D           lt td class  filterable-cell  gt Blue lt  td gt  x000D           lt td class  filterable-cell  gt 2000 lt  td gt  x000D       lt  tr gt  x000D               lt tr gt  x000D           lt td class  filterable-cell  gt Ford lt  td gt  x000D           lt td class  filterable-cell  gt Escort lt  td gt  x000D           lt td class  filterable-cell  gt Blue lt  td gt  x000D           lt td class  filterable-cell  gt 2000 lt  td gt  x000D       lt  tr gt  x000D        lt tr gt  x000D           lt td class  filterable-cell  gt Ford lt  td gt  x000D           lt td class  filterable-cell  gt Escort lt  td gt  x000D           lt td class  filterable-cell  gt Blue lt  td gt  x000D           lt td class  filterable-cell  gt 2000 lt  td gt  x000D       lt  tr gt  x000D       lt  tbody gt  x000D       x000D   lt  table gt  x000D   x000D   x000D

User · Answer

x000D   x000D  table   x000D      overflow-y  auto  x000D      height  50vh              HEIGHT MUST BE IN   vh          x000D    x000D   x000D  thead th   x000D      position  sticky  x000D      top  0  x000D    x000D      lt table gt  x000D         lt thead gt  x000D           lt tr gt  lt th gt TH 1 lt  th gt  lt th gt TH 2 lt  th gt  lt  tr gt  x000D         lt  thead gt  x000D         lt tbody gt  x000D           lt tr gt  lt td gt A1 lt  td gt  lt td gt A2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt B1 lt  td gt  lt td gt B2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt C1 lt  td gt  lt td gt C2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt D1 lt  td gt  lt td gt D2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt E1 lt  td gt  lt td gt E2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt F1 lt  td gt  lt td gt F2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt G1 lt  td gt  lt td gt G2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt H1 lt  td gt  lt td gt H2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt I1 lt  td gt  lt td gt I2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt J1 lt  td gt  lt td gt J2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt K1 lt  td gt  lt td gt K2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt L1 lt  td gt  lt td gt L2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt M1 lt  td gt  lt td gt M2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt N1 lt  td gt  lt td gt N2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt O1 lt  td gt  lt td gt O2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt P1 lt  td gt  lt td gt P2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt Q1 lt  td gt  lt td gt Q2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt R1 lt  td gt  lt td gt R2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt S1 lt  td gt  lt td gt S2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt T1 lt  td gt  lt td gt T2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt U1 lt  td gt  lt td gt U2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt V1 lt  td gt  lt td gt V2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt W1 lt  td gt  lt td gt W2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt X1 lt  td gt  lt td gt X2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt Y1 lt  td gt  lt td gt Y2 lt  td gt  lt  tr gt  x000D           lt tr gt  lt td gt Z1 lt  td gt  lt td gt Z2 lt  td gt  lt  tr gt  x000D         lt  tbody gt  x000D       lt  table gt  x000D   x000D   x000D    You don t need js  Important is to set table height in  vh

User · Answer

First add some markup for a bootstrap table  Here I created a striped table but also have added a custom table class  table-scroll which adds vertical scroll bar to the table and makes the table header fixed while scrolling down    lt div class  col-xs-8 col-xs-offset-2 well  gt       lt table class  table table-scroll table-striped  gt           lt thead gt               lt tr gt                   lt th gt   lt  th gt                   lt th gt First Name lt  th gt                   lt th gt Last Name lt  th gt                   lt th gt County lt  th gt               lt  tr gt           lt  thead gt           lt tbody gt               lt tr gt                   lt td gt 1 lt  td gt                   lt td gt Andrew lt  td gt                   lt td gt Jackson lt  td gt                   lt td gt Washington lt  td gt               lt  tr gt               lt tr gt                   lt td gt 2 lt  td gt                   lt td gt Thomas lt  td gt                   lt td gt Marion lt  td gt                   lt td gt Jackson lt  td gt               lt  tr gt               lt tr gt                   lt td gt 3 lt  td gt                   lt td gt Benjamin lt  td gt                   lt td gt Warren lt  td gt                   lt td gt Lincoln lt  td gt               lt  tr gt               lt tr gt                   lt td gt 4 lt  td gt                   lt td gt Grant lt  td gt                   lt td gt Wayne lt  td gt                   lt td gt Union lt  td gt               lt  tr gt               lt tr gt                   lt td gt 5 lt  td gt                   lt td gt John lt  td gt                   lt td gt Adams lt  td gt                   lt td gt Marshall lt  td gt               lt  tr gt               lt tr gt                   lt td gt 6 lt  td gt                   lt td gt Morgan lt  td gt                   lt td gt Lee lt  td gt                   lt td gt Lake lt  td gt               lt  tr gt               lt tr gt                   lt td gt 7 lt  td gt                   lt td gt John lt  td gt                   lt td gt Henry lt  td gt                   lt td gt Brown lt  td gt               lt  tr gt               lt tr gt                   lt td gt 8 lt  td gt                   lt td gt William lt  td gt                   lt td gt Jacob lt  td gt                   lt td gt Orange lt  td gt               lt  tr gt               lt tr gt                   lt td gt 9 lt  td gt                   lt td gt Kelly lt  td gt                   lt td gt Davidson lt  td gt                   lt td gt Taylor lt  td gt               lt  tr gt               lt tr gt                   lt td gt 10 lt  td gt                   lt td gt Colleen lt  td gt                   lt td gt Hurst lt  td gt                   lt td gt Randolph lt  td gt               lt  tr gt               lt tr gt                   lt td gt 11 lt  td gt                   lt td gt Rhona lt  td gt                   lt td gt Herrod lt  td gt                   lt td gt Cumberland lt  td gt               lt  tr gt               lt tr gt                   lt td gt 12 lt  td gt                   lt td gt Jane lt  td gt                   lt td gt Paul lt  td gt                   lt td gt Marshall lt  td gt               lt  tr gt               lt tr gt                   lt td gt 13 lt  td gt                   lt td gt Ashton lt  td gt                   lt td gt Fox lt  td gt                   lt td gt Calhoun lt  td gt               lt  tr gt               lt tr gt                   lt td gt 14 lt  td gt                   lt td gt Garrett lt  td gt                   lt td gt John lt  td gt                   lt td gt Madison lt  td gt               lt  tr gt               lt tr gt                   lt td gt 15 lt  td gt                   lt td gt Fredie lt  td gt                   lt td gt Winters lt  td gt                   lt td gt Washington lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt   lt  div gt    css   table-scroll tbody       position  absolute      overflow-y  scroll      height  250px      table-scroll tr       width  100       table-layout  fixed      display  inline-table      table-scroll thead  gt  tr  gt  th       border  none

User · Answer

lt style gt   thead  tbody       display  block     tbody       overflow  auto     height  100px     th td       width  120px      lt  style gt    lt table class  quot table table-bordered table-striped quot  gt       lt thead style  quot background-color lightgreen quot  gt           lt tr gt               lt th gt Id lt  th gt  lt th gt Name lt  th gt  lt th gt Roll lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td gt 1 lt  td gt               lt td gt Shahriar lt  td gt               lt td gt 12 lt  td gt           lt  tr gt           lt tr gt               lt td gt 1 lt  td gt               lt td gt Shahriar lt  td gt               lt td gt 12 lt  td gt           lt  tr gt           lt tr gt               lt td gt 1 lt  td gt               lt td gt Shahriar lt  td gt               lt td gt 12 lt  td gt           lt  tr gt           lt tr gt               lt td gt 1 lt  td gt               lt td gt Shahriar lt  td gt               lt td gt 12 lt  td gt           lt  tr gt           lt tr gt               lt td gt 1 lt  td gt               lt td gt Shahriar lt  td gt               lt td gt 12 lt  td gt           lt  tr gt           lt tr gt               lt td gt 1 lt  td gt               lt td gt Shahriar lt  td gt               lt td gt 12 lt  td gt           lt  tr gt           lt tr gt               lt td gt 1 lt  td gt               lt td gt Shahriar lt  td gt               lt td gt 12 lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt

User · Answer

Don t need the wrap it in a div     CSS   tr   width  100   display  inline-table  table-layout  fixed     table   height 300px                   lt -- Select the height of the table  display  -moz-groupbox        Firefox Bad Effect   tbody    overflow-y  scroll          height  200px                  lt -- Select the height of the body   width  100     position  absolute      Bootply   http   www bootply com AgI8LpDugl

User · Answer

You can place two div where 1st div  Header  will have transparent scroll bar and 2nd div will be have data with visible auto scroll bar  Sample has angular code snippet for looping through the data     Below code worked for me -   lt div id  transparentScrollbarDiv  class  container-fluid  style  overflow-y  scroll   gt       lt div class  row  gt           lt div class  col-lg-3 col-xs-3  gt  lt strong gt   col1   lt  strong gt  lt  div gt           lt div class  col-lg-6 col-xs-6  gt  lt strong gt   col2   lt  strong gt  lt  div gt           lt div class  col-lg-3 col-xs-3  gt  lt strong gt   col3   lt  strong gt  lt  div gt       lt  div gt   lt  div gt   lt div class  container-fluid  style  height  150px  overflow-y  auto  gt       lt div gt           lt div class  row  ng-repeat  row in rows  gt               lt div class  col-lg-3 col-xs-3  gt   row col1   lt  div gt               lt div class  col-lg-6 col-xs-6  gt   row col2   lt  div gt               lt div class  col-lg-3 col-xs-3  gt   row col3   lt  div gt           lt  div gt       lt  div gt   lt  div gt    Additional style to hide header scroll bar -   lt style gt           transparentScrollbarDiv  -webkit-scrollbar               width  inherit                        this targets the default scrollbar  compulsory               transparentScrollbarDiv  -webkit-scrollbar-track               background-color  transparent                        the new scrollbar will have a flat appearance with the set background color              transparentScrollbarDiv  -webkit-scrollbar-thumb               background-color  transparent                        this will style the thumb  ignoring the track              transparentScrollbarDiv  -webkit-scrollbar-button               background-color  transparent                        optionally  you can style the top and the bottom buttons  left and right for horizontal bars               transparentScrollbarDiv  -webkit-scrollbar-corner               background-color  transparent                        if both the vertical and the horizontal bars appear  then perhaps the right bottom corner also needs to be styled         lt  style gt

User · Answer

An easy way without fixed width    myTable tbody    display block    overflow auto    height 200px    width 100      myTable thead tr    display block      Source  Now  on onLoad  to adjust th widths  just add this jquery script     each     myTable tbody tr nth 0  td    function k v            myTable thead th nth   k      css  width     v  css  width

User · Answer

I made some kinda working CSS only solution by using position  sticky  Should work on evergreen browsers  Try to resize browser  Still have some layout issue in FF  will fix it later  but at least table headers handle vertical and horizontal scrolling  Codepen Example

User · Answer

Late to the party  Story of my life   but since this is the first result on google  and none of the above got me working  here s my code    Set a min width where your table start to look like crap   table   min-width  600px       The next 3 sections make the magic happen   thead  tbody tr       display  table      width  100       table-layout  fixed     tbody       display  block      max-height  200px      overflow-x  hidden      overflow-y  scroll     td       overflow  hidden      text-overflow  ellipsis       Use the following to make sure cols align correctly   table  tr  th  td       border  1px solid black      border-collapse  collapse        Set your columns to where you want them to be  skip the one that you can have resize to any width       th nth-child 1   td nth-child 1        width  85px    th nth-child 2   td nth-child 2        width  150px    th nth-child 4   td nth-child 4        width  125px    th nth-child 5        width  102px    td nth-child 5        width  85px

User · Answer

By far the best solution I ve seen that is CSS only  with good cross browser support  and no alignment issues is this solution from codingrabbithole table     width  100     thead  tbody tr     display  table    width  100     table-layout  fixed    tbody     display  block    overflow-y  auto    table-layout  fixed    max-height  200px

User · Answer

HTML   lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt RoboPage lt  title gt       lt link rel  stylesheet  type  text css  href  practice css  gt       lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  integrity  sha384-ggOyR0iXCbMQv3Xipma34MD dH 1fQ784 j6cY iJTQUOhcWr7x9JvoRxT2MZw1T  crossorigin  anonymous  gt    lt  head gt   lt body gt            lt div class  container  gt                   lt table class  table  gt                     lt thead gt                       lt tr gt                         lt th class  col-md-3 col-sm-3   gt First Name lt  th gt                         lt th class  col-md-3 col-sm-3   gt Last Name lt  th gt                         lt th class  col-md-6 col-sm-6   gt E-mail lt  th gt                       lt  tr gt                     lt  thead gt                     lt tbody gt                       lt tr gt                         lt td class  col-md-3 col-sm-3  gt Top Row lt  td gt                         lt td class  col-md-3 col-sm-3  gt Doe lt  td gt                         lt td class  col-md-6 col-sm-6  gt johndoe email com lt  td gt                       lt  tr gt                        lt tr gt                         lt td class  col-md-3 col-sm-3  gt John lt  td gt                         lt td class  col-md-3 col-sm-3  gt Doe lt  td gt                         lt td class  col-md-6 col-sm-6  gt johndoe email com lt  td gt                       lt  tr gt                       lt tr gt                         lt td class  col-md-3 col-sm-3  gt John lt  td gt                         lt td class  col-md-3 col-sm-3  gt Doe lt  td gt                         lt td class  col-md-6 col-sm-6  gt johndoe email com lt  td gt                       lt  tr gt                       lt tr gt                         lt td class  col-md-3 col-sm-3  gt John lt  td gt                         lt td class  col-md-3 col-sm-3  gt Doe lt  td gt                         lt td class  col-md-6 col-sm-6  gt johndoe email com lt  td gt                       lt  tr gt                       lt tr gt                         lt td class  col-md-3 col-sm-3  gt John lt  td gt                         lt td class  col-md-3 col-sm-3  gt Doe lt  td gt                         lt td class  col-md-6 col-sm-6  gt johndoe email com lt  td gt                       lt  tr gt                       lt tr gt                         lt td class  col-md-3 col-sm-3  gt John lt  td gt                         lt td class  col-md-3 col-sm-3  gt Doe lt  td gt                         lt td class  col-md-6 col-sm-6  gt johndoe email com lt  td gt                       lt  tr gt                     lt  tbody gt                   lt  table gt                 lt  div gt     lt script src  practice js  gt  lt  script gt   lt script src  https   code jquery com jquery-3 3 1 slim min js  integrity  sha384-q8i X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo  crossorigin  anonymous  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 7 umd popper min js  integrity  sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1  crossorigin  anonymous  gt  lt  script gt   lt script src  https   stackpath bootstrapcdn com bootstrap 4 3 1 js bootstrap min js  integrity  sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf nJGzIxFDsf4x0xIM B07jRM  crossorigin  anonymous  gt  lt  script gt   lt  body gt   lt  html gt    CSS  thead tbody tr td th      display block    tbody      height 200px      overflow-y auto      width  100     thead  gt  tr  gt  th  tbody  gt  tr  gt  td      float left

User · Answer

Here is the working solution    x000D   x000D  table   x000D      width  100   x000D    x000D   x000D  thead  tbody  tr  td  th   display  block    x000D   x000D  tr after   x000D      content       x000D      display  block  x000D      visibility  hidden  x000D      clear  both  x000D    x000D   x000D  thead th   x000D      height  30px  x000D   x000D        text-align  left    x000D    x000D   x000D  tbody   x000D      height  120px  x000D      overflow-y  auto  x000D    x000D   x000D  thead   x000D         fallback    x000D    x000D   x000D   x000D  tbody td  thead th   x000D      width  19 2   x000D      float  left  x000D    x000D   lt link href  http   netdna bootstrapcdn com bootstrap 3 0 3 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt table class  table table-striped  gt  x000D       lt thead gt  x000D           lt tr gt  x000D               lt th gt Make lt  th gt  x000D               lt th gt Model lt  th gt  x000D               lt th gt Color lt  th gt  x000D               lt th gt Year lt  th gt  x000D           lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt td class  filterable-cell  gt Ford lt  td gt  x000D               lt td class  filterable-cell  gt Escort lt  td gt  x000D               lt td class  filterable-cell  gt Blue lt  td gt  x000D               lt td class  filterable-cell  gt 2000 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td class  filterable-cell  gt Ford lt  td gt  x000D               lt td class  filterable-cell  gt Escort lt  td gt  x000D               lt td class  filterable-cell  gt Blue lt  td gt  x000D               lt td class  filterable-cell  gt 2000 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td class  filterable-cell  gt Ford lt  td gt  x000D               lt td class  filterable-cell  gt Escort lt  td gt  x000D               lt td class  filterable-cell  gt Blue lt  td gt  x000D               lt td class  filterable-cell  gt 2000 lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td class  filterable-cell  gt Ford lt  td gt  x000D               lt td class  filterable-cell  gt Escort lt  td gt  x000D               lt td class  filterable-cell  gt Blue lt  td gt  x000D               lt td class  filterable-cell  gt 2000 lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    Link to jsfiddle

User · Answer

Update For newer and still maintained library try jquery floatThead  as mentioned by Bob Jordan in the comment  instead  Old Answer This is a very old answer  the library mentioned below no longer maintained  I am using StickyTableHeaders on GitHub and it works like charm  I had to add this css to make the header not transparent though  table stickyHeader thead     border-top  none    border-bottom  none    background-color   FFF

User · Answer

Likely you ll get multiple tables on one page  therefore you need CSS classes  Please find a modified  giulio s solution for that   Just declare it in table    lt table class  table table-striped header-fixed  gt  lt  table gt    CSS   header-fixed       width  100       header-fixed  gt  thead   header-fixed  gt  tbody   header-fixed  gt  thead  gt  tr   header-fixed  gt  tbody  gt  tr   header-fixed  gt  thead  gt  tr  gt  th   header-fixed  gt  tbody  gt  tr  gt  td       display  block      header-fixed  gt  tbody  gt  tr after   header-fixed  gt  thead  gt  tr after       content           display  block      visibility  hidden      clear  both      header-fixed  gt  tbody       overflow-y  auto      height  150px      header-fixed  gt  tbody  gt  tr  gt  td   header-fixed  gt  thead  gt  tr  gt  th       width  20       float  left      Be aware that current implementation suits five columns only  If you need a different number  change the width parameter from 20  to  100    number of columns

User · Answer

For tables that are full height  the page scrolls  not the table   Note  I move the whole  lt thead gt     lt  thead gt  beause In my case I had two rows  Title and filters   With JS  jQuery      function                  let marginTop   0     Add margin if the page has a top nav-bar             let  thead       table-fixed-head   find  thead                let offset    thead first   offset   top - marginTop              let lastPos   0                 window  on  scroll   function                       if   window scrollY  gt  offset                                         if   lastPos     0                                                    Add a class for styling                          thead addClass  floating-header                                               lastPos   window scrollY - offset                       thead css  transform    translateY       lastPos      px                                       else if   lastPos     0                                         lastPos   0                       thead removeClass  floating-header                         thead css  transform    translateY     0    px                                             CSS  Just for styling    thead floating-header gt tr gt th          background-color   efefef      thead floating-header gt tr last-child gt th          border-bottom  1px solid  aaa

User · Answer

put the table inside the div like this to make scrollable table vertically  change overflow-yto overflow-x to make table scrollable horizontally  just overflow to make table scrollable both horizontal and vertical    lt div style  overflow-y  scroll   gt        lt table gt               lt  table gt   lt  div gt

User · Answer

Here is my copen pen on how to make fixed table header with scrollable rows and columns  The columns are also been fixed width  http   codepen io abhilashn pen GraJyp   lt  -- Listing table -- gt           lt div class  row  gt               lt div class  col-sm-12  gt                   lt div class  cust-table-cont  gt                   lt div class  table-responsive  gt                     lt table border  0  class  table cust-table  gt                        lt thead gt                           lt tr style    gt                             lt th style  width 80px   gt   lt  th gt                              lt th style  width 150px   class  text-center  gt  lt li class  fa fa-gear  gt  lt  li gt  lt  th gt                               lt th style  width 250px   gt Title lt  th gt                               lt th style  width 200px   gt Company lt  th gt                              lt th style  width 100px   gt Priority lt  th gt                              lt th style  width 120px   gt Type lt  th gt                                  lt th style  width 150px   gt Assigned to lt  th gt                              lt th style  width 120px   gt Status lt  th gt                            lt  tr gt                         lt  thead gt                         lt tbody gt                           lt tr gt                             lt th style  width 80px   gt 1 lt  th gt                             lt td style  width 150px   class  text-center  gt  lt button class  btn btn-outline-danger del-icon  gt  lt span class  fa fa-trash-o  gt  lt  span gt  lt  button gt   lt button class  btn btn-outline-success  gt  lt span class  fa fa-pencil  gt  lt  span gt  lt  button gt  lt  td gt                             lt td style  width 250px   gt Lorem ipsum dolor sit lt  td gt                             lt td style  width 200px   gt lorem ispusm lt  td gt                             lt td style  width 100px   gt high lt  td gt                             lt td style  width 120px   gt lorem ipsum lt  td gt                             lt td style  width 150px   gt lorem ipsum lt  td gt                             lt td style  width 120px   gt lorem ipsum lt  td gt                           lt  tr gt                            lt tr gt                             lt th scope  row  gt 2 lt  th gt                             lt td class  text-center  gt  lt button class  btn btn-outline-danger del-icon  gt  lt span class  fa fa-trash-o  gt  lt  span gt  lt  button gt   lt button class  btn btn-outline-success  gt  lt span class  fa fa-pencil  gt  lt  span gt  lt  button gt  lt  td gt                             lt td gt Lorem ipsum dolor sit lt  td gt                             lt td gt lorem ispusm lt  td gt                             lt td gt high lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                           lt  tr gt                           lt tr gt                             lt th scope  row  gt 3 lt  th gt                             lt td class  text-center  gt  lt button class  btn btn-outline-danger del-icon  gt  lt span class  fa fa-trash-o  gt  lt  span gt  lt  button gt   lt button class  btn btn-outline-success  gt  lt span class  fa fa-pencil  gt  lt  span gt  lt  button gt  lt  td gt                             lt td gt Lorem ipsum dolor sit lt  td gt                             lt td gt lorem ispusm lt  td gt                             lt td gt high lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                           lt  tr gt                           lt tr gt                             lt th scope  row  gt 4 lt  th gt                             lt td class  text-center  gt  lt button class  btn btn-outline-danger del-icon  gt  lt span class  fa fa-trash-o  gt  lt  span gt  lt  button gt   lt button class  btn btn-outline-success  gt  lt span class  fa fa-pencil  gt  lt  span gt  lt  button gt  lt  td gt                             lt td gt Lorem ipsum dolor sit lt  td gt                             lt td gt lorem ispusm lt  td gt                             lt td gt high lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                           lt  tr gt                           lt tr gt                             lt th scope  row  gt 5 lt  th gt                             lt td class  text-center  gt  lt button class  btn btn-outline-danger del-icon  gt  lt span class  fa fa-trash-o  gt  lt  span gt  lt  button gt   lt button class  btn btn-outline-success  gt  lt span class  fa fa-pencil  gt  lt  span gt  lt  button gt  lt  td gt                             lt td gt Lorem ipsum dolor sit lt  td gt                             lt td gt lorem ispusm lt  td gt                             lt td gt high lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                           lt  tr gt                           lt tr gt                             lt th scope  row  gt 6 lt  th gt                             lt td class  text-center  gt  lt button class  btn btn-outline-danger del-icon  gt  lt span class  fa fa-trash-o  gt  lt  span gt  lt  button gt   lt button class  btn btn-outline-success  gt  lt span class  fa fa-pencil  gt  lt  span gt  lt  button gt  lt  td gt                             lt td gt Lorem ipsum dolor sit lt  td gt                             lt td gt lorem ispusm lt  td gt                             lt td gt high lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                           lt  tr gt                           lt tr gt                             lt th scope  row  gt 7 lt  th gt                             lt td class  text-center  gt  lt button class  btn btn-outline-danger del-icon  gt  lt span class  fa fa-trash-o  gt  lt  span gt  lt  button gt   lt button class  btn btn-outline-success  gt  lt span class  fa fa-pencil  gt  lt  span gt  lt  button gt  lt  td gt                             lt td gt Lorem ipsum dolor sit lt  td gt                             lt td gt lorem ispusm lt  td gt                             lt td gt high lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                           lt  tr gt                           lt tr gt                             lt th scope  row  gt 8 lt  th gt                             lt td class  text-center  gt  lt button class  btn btn-outline-danger del-icon  gt  lt span class  fa fa-trash-o  gt  lt  span gt  lt  button gt   lt button class  btn btn-outline-success  gt  lt span class  fa fa-pencil  gt  lt  span gt  lt  button gt  lt  td gt                             lt td gt Lorem ipsum dolor sit lt  td gt                             lt td gt lorem ispusm lt  td gt                             lt td gt high lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                           lt  tr gt                           lt tr gt                             lt th scope  row  gt 9 lt  th gt                             lt td class  text-center  gt  lt button class  btn btn-outline-danger del-icon  gt  lt span class  fa fa-trash-o  gt  lt  span gt  lt  button gt   lt button class  btn btn-outline-success  gt  lt span class  fa fa-pencil  gt  lt  span gt  lt  button gt  lt  td gt                             lt td gt Lorem ipsum dolor sit lt  td gt                             lt td gt lorem ispusm lt  td gt                             lt td gt high lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                           lt  tr gt                           lt tr gt                             lt th scope  row  gt 10 lt  th gt                             lt td class  text-center  gt  lt button class  btn btn-outline-danger del-icon  gt  lt span class  fa fa-trash-o  gt  lt  span gt  lt  button gt   lt button class  btn btn-outline-success  gt  lt span class  fa fa-pencil  gt  lt  span gt  lt  button gt  lt  td gt                             lt td gt Lorem ipsum dolor sit lt  td gt                             lt td gt lorem ispusm lt  td gt                             lt td gt high lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                           lt  tr gt                           lt tr gt                             lt th scope  row  gt 11 lt  th gt                             lt td class  text-center  gt  lt button class  btn btn-outline-danger del-icon  gt  lt span class  fa fa-trash-o  gt  lt  span gt  lt  button gt   lt button class  btn btn-outline-success  gt  lt span class  fa fa-pencil  gt  lt  span gt  lt  button gt  lt  td gt                             lt td gt Lorem ipsum dolor sit lt  td gt                             lt td gt lorem ispusm lt  td gt                             lt td gt high lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                           lt  tr gt                           lt tr gt                             lt th scope  row  gt 12 lt  th gt                             lt td class  text-center  gt  lt button class  btn btn-outline-danger del-icon  gt  lt span class  fa fa-trash-o  gt  lt  span gt  lt  button gt   lt button class  btn btn-outline-success  gt  lt span class  fa fa-pencil  gt  lt  span gt  lt  button gt  lt  td gt                             lt td gt Lorem ipsum dolor sit lt  td gt                             lt td gt lorem ispusm lt  td gt                             lt td gt high lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                              lt td gt lorem ipsum lt  td gt                           lt  tr gt                       lt  tbody gt                     lt  table gt                   lt  div gt                   lt  div gt   lt  -- End of cust-table-cont block -- gt               lt  div gt           lt  div gt   lt  -- ENd of row -- gt     x000D   x000D   cust-table-cont   width 100   overflow-x auto     x000D   cust-table-cont  table-responsive   width 1190px     x000D   cust-table   table-layout fixed      x000D   cust-table thead   cust-table tbody    x000D  display  block  x000D    x000D   cust-table tbody   max-height 620px  overflow-y auto     x000D   x000D   x000D

User · Answer

Multiple scrollable table support in a single window   Pure CSS  amp  No fixed or sticky   I am searching fixed table header with auto  td  and  th  width for years  Finally i coded something  it s work well for me but i am not sure is it work well for everyone   Problem 1  We can t set table or tbody height while have tons of  tr  it s because of default table properties   Solution  Set table a display property   Problem 2  When we set a display property  the width of  td  elements can t be equal width of  th  elements  And it is hard to fill elements properly in full width table like 100    Solution  CSS  flex  is very good solution for width and fill set-ups  so we will build our tbody and thead elements with CSS  flex     x000D   x000D   ea table   x000D    border  1px solid  ddd  x000D    display  block  x000D    background   fff  x000D    overflow-y  hidden  x000D    box-sizing  border-box  x000D    float  left  x000D    height auto  x000D    width  100   x000D    x000D   x000D   ea table tbody  thead   x000D    flex-direction  column  x000D    display  flex  x000D    x000D   x000D   ea table tbody   x000D    height  300px  x000D    overflow  auto  x000D    x000D   x000D   ea table thead   x000D    border-bottom  1px solid  ddd  x000D    x000D   x000D   ea table tr   x000D    display  flex  x000D    x000D   x000D   x000D   ea table tbody tr nth-child 2n 1    x000D    background   f8f8f8  x000D      x000D   x000D   ea table td   ea table th   x000D    text-align  left  x000D    font-size  0 75rem  x000D    padding  1 5rem  x000D    flex  1  x000D    x000D   lt table class  ea table  gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th gt Something Long lt  th gt  x000D           lt th gt Something  lt  th gt  x000D           lt th gt Something Very Long lt  th gt  x000D           lt th gt Something Long lt  th gt  x000D           lt th gt Some lt  th gt  x000D         lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt td gt  Lorem Ipsum Dolar Sit Amet lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum  lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum Dolar  lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum Dolar Sit Amet lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum  lt  td gt  x000D           lt td gt  Lorem Ipsum Dolar  lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt  Lorem Ipsum Dolar Sit Amet lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum  lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum Dolar  lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt  Lorem Ipsum Dolar Sit Amet lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum  lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum Dolar  lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt  Lorem Ipsum Dolar Sit Amet lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum  lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum Dolar  lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt  Lorem Ipsum Dolar Sit Amet lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum  lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum Dolar  lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt  Lorem Ipsum Dolar Sit Amet lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum  lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum Dolar  lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt  Lorem Ipsum Dolar Sit Amet lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum  lt  td gt  x000D           lt td gt  Lorem  lt  td gt  x000D           lt td gt  Lorem Ipsum Dolar  lt  td gt  x000D         lt  tr gt  x000D   x000D       lt  tbody gt  x000D   x000D     lt  table gt  x000D   x000D   x000D    jsfiddle

User · Answer

Used this link  stackoverflow com a 17380697 1725764  by Hashem Qolami at the original posts  comments and used display inline-blocks instead of floats  Fixes borders if the table has the class  table-bordered  also   table scroll     width  100        amp  table-bordered       td  th         border-top  0        border-right  0                th         border-bottom-width  1px            td first-child      th first-child         border-right  0        border-left  0              tbody       height  200px      overflow-y  auto      overflow-x  hidden          tbody  thead       display  block        tr       width  100       display  block        th  td       display  inline-block         td       height  46px    depends on your site         Then just add the widths of the td and th  table table-prep     tr  gt  td type    tr  gt  th type      width  10         tr  gt  td name    tr  gt  th name    tr  gt  td notes    tr  gt  th notes    tr  gt  td quantity    tr  gt  th quantity      width  30

User · Answer

Now that    all    browsers support ES6  I   ve incorporated the various suggestions above into a JavaScript class that takes a table as an argument and makes the body scrollable  It lets the browser   s layout engine determine header and body cell widths  and then makes the column widths match each other   The height of a table can be set explicitly  or made to fill the remaining part of the browser window  and provides callbacks for events such as viewport resizing and or details elements opening or closing   Multi-row header support is available  and is especially effective if the table uses the id headers attributes for accessibility as specified in the WCAC Guidelines  which is not as onerous a requirement as it might seem   The code does not depend on any libraries  but plays nicely with them if they are being used   Tested on pages that use JQuery    The code and sample usage are available on Github

User · Answer

Fixed table head - CSS-only  Simply position  sticky  top  0  your th elements   Chrome  FF  Edge    x000D   x000D   tableFixHead            overflow-y  auto  height  100px    x000D   tableFixHead thead th   position  sticky  top  0    x000D   x000D     Just common table stuff  Really     x000D  table    border-collapse  collapse  width  100     x000D  th  td   padding  8px 16px    x000D  th       background  eee    x000D   lt div class  tableFixHead  gt  x000D     lt table gt  x000D       lt thead gt  x000D         lt tr gt  lt th gt TH 1 lt  th gt  lt th gt TH 2 lt  th gt  lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  lt td gt A1 lt  td gt  lt td gt A2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt B1 lt  td gt  lt td gt B2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt C1 lt  td gt  lt td gt C2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt D1 lt  td gt  lt td gt D2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt E1 lt  td gt  lt td gt E2 lt  td gt  lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D    TH borders problem fix  Since border cannot be painted properly on a translated TH element  to recreate and render  borders  use the box-shadow property      Borders  if you need them      tableFixHead   tableFixHead td     box-shadow  inset 1px -1px  000     tableFixHead th     box-shadow  inset 1px 1px  000  0 1px  000       x000D   x000D   tableFixHead            overflow-y  auto  height  100px    x000D   tableFixHead thead th   position  sticky  top  0    x000D   x000D     Just common table stuff  Really     x000D  table    border-collapse  collapse  width  100     x000D  th  td   padding  8px 16px    x000D  th       background  eee    x000D   x000D     Borders  if you need them     x000D   tableFixHead  x000D   tableFixHead td   x000D    box-shadow  inset 1px -1px  000  x000D    x000D   tableFixHead th   x000D    box-shadow  inset 1px 1px  000  0 1px  000  x000D    x000D   lt div class  tableFixHead  gt  x000D     lt table gt  x000D       lt thead gt  x000D         lt tr gt  lt th gt TH 1 lt  th gt  lt th gt TH 2 lt  th gt  lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  lt td gt A1 lt  td gt  lt td gt A2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt B1 lt  td gt  lt td gt B2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt C1 lt  td gt  lt td gt C2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt D1 lt  td gt  lt td gt D2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt E1 lt  td gt  lt td gt E2 lt  td gt  lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D      Fixed table head - using JS   IE   You can use a bit of JS and translateY the th elements  jQuery example   x000D   x000D  var  th       tableFixHead   find  thead th   x000D      tableFixHead   on  scroll   function     x000D     th css  transform    translateY    this scrollTop   px     x000D      x000D   tableFixHead   overflow-y  auto  height  100px    x000D   x000D     Just common table stuff     x000D  table    border-collapse  collapse  width  100     x000D  th  td   padding  8px 16px    x000D  th       background  eee    x000D   lt div class  tableFixHead  gt  x000D     lt table gt  x000D       lt thead gt  x000D         lt tr gt  lt th gt TH 1 lt  th gt  lt th gt TH 2 lt  th gt  lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  lt td gt A1 lt  td gt  lt td gt A2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt B1 lt  td gt  lt td gt B2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt C1 lt  td gt  lt td gt C2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt D1 lt  td gt  lt td gt D2 lt  td gt  lt  tr gt  x000D         lt tr gt  lt td gt E1 lt  td gt  lt td gt E2 lt  td gt  lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   lt script src  https   code jquery com jquery-3 1 0 js  gt  lt  script gt  x000D   x000D   x000D    Or plain ES6 if you prefer  no jQuery required       Fix table head function tableFixHead  e        const el   e target            sT   el scrollTop      el querySelectorAll  thead th   forEach th   gt         th style transform    translateY   sT px            document querySelectorAll   tableFixHead   forEach el   gt       el addEventListener  scroll   tableFixHead

User · Answer

Cleaner Solution  CSS Only    table-fixed tbody       display block      height 85vh      overflow auto     table-fixed thead   table-fixed tbody tr       display table      width 100        lt table class  table table-striped table-fixed  gt       lt thead gt           lt tr align  center  gt               lt th gt Col 1 lt  th gt               lt th gt Col 2 lt  th gt               lt th gt Col 3 lt  th gt               lt th gt Col 4 lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td gt Content 1 lt  td gt               lt td gt Content 1 lt  td gt               lt td gt Content 1 lt  td gt               lt td gt Content 1 lt  td gt           lt  tr gt           lt tr gt               lt td gt Longer Content 1 lt  td gt               lt td gt Longer Content 1 lt  td gt               lt td gt Longer Content 1 lt  td gt               lt td gt Longer Content 1 lt  td gt           lt  tr gt       lt  tbody  lt  table

User · Answer

It is easier with css  table tbody   display block  max-height 450px  overflow-y scroll    table thead  table tbody tr   display table  width 100   table-layout fixed

User · Answer

For whatever it s worth now  I did post a solution to a sister-thread Table scroll with HTML and CSS which    takes two tables  one for only header  one for all - layouted by the browser  after layouting  adjust the upper  header-only  table to the widths of the lower one hide  visibility  not display  the header of the lower table and make the lower table scrollable w in a div   The solution is agnostic to any styles   frameworks used - so maybe it s useful here as well     A long description is in Table scroll with HTML and CSS   the code is also in this pen  https   codepen io sebredhh pen QmJvKy

User · Answer

x000D   x000D  table   x000D   x000D      display  block  x000D    x000D   x000D  thead  tbody   x000D      display  block  x000D    x000D  tbody   x000D      position  absolute  x000D      height  150px  x000D      overflow-y  scroll  x000D    x000D  td  th   x000D      min-width  100px  important  x000D      height  25px  important  x000D      overflow hidden  important  x000D      text-overflow  ellipsis  important  x000D      max-width  100px  important  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 4 0 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 4 0 jquery min js  gt  lt  script gt  x000D   x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 4 0 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt div class  container  style  position fixed height 180px overflow-x scroll overflow-y hidden  gt  x000D   x000D   x000D   lt table gt  x000D            lt thead gt  x000D           lt tr gt  x000D                lt th gt Col1 lt  th gt  x000D               lt th gt Col2 lt  th gt  x000D               lt th gt Username lt  th gt  x000D               lt th gt Password lt  th gt  x000D               lt th gt First Name lt  th gt  x000D               lt th gt Last Name lt  th gt  x000D               lt th gt Col16 lt  th gt  x000D               lt th gt Col7 lt  th gt  x000D               lt th gt Col8 lt  th gt  x000D               lt th gt Col9 lt  th gt  x000D               lt th gt Col10 lt  th gt  x000D               lt th gt Col11 lt  th gt  x000D               lt th gt Col12 lt  th gt  x000D               lt th gt Col13 lt  th gt  x000D               lt th gt Col14 lt  th gt  x000D               lt th gt Col15 lt  th gt  x000D               lt th gt Col16 lt  th gt  x000D               lt th gt Col17 lt  th gt  x000D               lt th gt Col18 lt  th gt  x000D           lt  tr gt  x000D                 lt  thead gt  x000D            lt tbody gt  x000D            lt  tbody gt  x000D             lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D             x000D                       lt tr gt  x000D             lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D               lt td gt Long Value lt  td gt  x000D                         lt td gt Title lt  td gt  x000D             lt  tr gt  x000D            lt  table gt  x000D   x000D   x000D   x000D   lt  div gt  enter code here  x000D   x000D   x000D

User · Answer

In my eyes  one of the best plugins for jQuery is DataTables   It also has an extension for fixed header  and it is very easily implemented   Taken from their site   HTML    lt table id  example  class  display  cellspacing  0  width  100   gt       lt thead gt           lt tr gt               lt th gt Name lt  th gt               lt th gt Position lt  th gt               lt th gt Office lt  th gt               lt th gt Age lt  th gt               lt th gt Start date lt  th gt               lt th gt Salary lt  th gt           lt  tr gt       lt  thead gt        lt tfoot gt           lt tr gt               lt th gt Name lt  th gt               lt th gt Position lt  th gt               lt th gt Office lt  th gt               lt th gt Age lt  th gt               lt th gt Start date lt  th gt               lt th gt Salary lt  th gt           lt  tr gt       lt  tfoot gt        lt tbody gt           lt tr gt               lt td gt Tiger Nixon lt  td gt               lt td gt System Architect lt  td gt               lt td gt Edinburgh lt  td gt               lt td gt 61 lt  td gt               lt td gt 2011 04 25 lt  td gt               lt td gt  320 800 lt  td gt           lt  tr gt           lt tr gt               lt td gt Garrett Winters lt  td gt               lt td gt Accountant lt  td gt               lt td gt Tokyo lt  td gt               lt td gt 63 lt  td gt               lt td gt 2011 07 25 lt  td gt               lt td gt  170 750 lt  td gt           lt  tr gt           lt tr gt               lt td gt Ashton Cox lt  td gt               lt td gt Junior Technical Author lt  td gt               lt td gt San Francisco lt  td gt               lt td gt 66 lt  td gt               lt td gt 2009 01 12 lt  td gt               lt td gt  86 000 lt  td gt           lt  tr gt     lt  tbody gt   lt  table gt    JavaScript     document  ready function         var table       example   DataTable         new   fn dataTable FixedHeader  table           But the simplest you can have for just making a scrollable  lt tbody gt  is     configure table with fixed header and scrolling rows     example   DataTable       scrollY  400      scrollCollapse  true      paging  false      searching  false      ordering  false      info  false

User · Answer

I used the floatThead jQuery plugin  https   mkoryak github io floatThead  intro   docs say it works with Bootstrap 3 tables and I can say it also works with Bootstrap 4 tables with or without the table-responsive helper   Using the plugin is as simple as this   HTML  vanilla bootstrap table markup    lt div class  table-responsive  gt      lt table id  myTable  class  table table-striped  gt           lt thead gt     lt  thead gt           lt tbody gt     lt  tbody gt      lt  table gt   lt  div gt    Plugin Initialization     document  ready function         var tbl     myTable        tbl floatThead           responsiveContainer  function tbl                return tbl closest   table-responsive                            Full disclaimer  I am not associated with the plugin in any way  I happened to find it after hours of trying lots of other solutions posted here and elsewhere

User · Answer

You should try with  display block   to tbody  because now it s inline-block and in order to set height  the element should be  block

User · Answer

I had a lot of trouble getting the stickytableheaders library to work  Doing a bit more searching  I found floatThead is an actively maintained alternative with recent updates and better documentation

User · Answer

The latest addition position  sticky  would be the simplest solution here   x000D   x000D   outer  x000D      overflow-y  auto  x000D      height 100px  x000D        x000D   x000D   outer table  x000D      width  100   x000D      table-layout  fixed   x000D      border   1px solid black  x000D      border-spacing  1px  x000D    x000D   x000D   outer table th   x000D          text-align  left  x000D          top 0  x000D          position  sticky  x000D          background-color  white    x000D    x000D    lt div class    outer  gt  x000D    lt table gt  x000D                lt tr  gt  x000D                 lt th gt col1 lt  th gt  x000D                 lt th gt col2 lt  th gt  x000D                 lt th gt col3 lt  th gt  x000D                 lt th gt col4 lt  th gt  x000D                  lt th gt col5 lt  th gt  x000D                lt tr gt  x000D                          x000D               lt tr  gt  x000D                 lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D                  lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D               lt tr gt  x000D                lt tr  gt  x000D                  lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D                  lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D               lt tr gt  x000D                lt tr  gt  x000D                   lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D                  lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D               lt tr gt  x000D                lt tr  gt  x000D                   lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D                  lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D               lt tr gt  x000D                lt tr  gt  x000D                    lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D                  lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D               lt tr gt  x000D                lt tr  gt  x000D                    lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D                  lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D                 lt td gt data lt  td gt  x000D               lt tr gt  x000D    lt  table gt  x000D    lt  div gt  x000D   x000D   x000D

[html] Table fixed header and scrollable body

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to html-table