How to stick table header thead on top while scrolling down the table rows with fixed header navbar in bootstrap 3

Question

Bootstrap layout with fixed-navbar  Having table with so many rows in body   Issue  As i scroll the page navigation-bar will be there because it is fixed  as i scroll more i want table header to be fixed under navigation-bar and the content of table table-body  scrolls without scroll bar   Something like This - Codepen      Fiddle    Bootstrap table    Working Fiddle after referring to the answer     HTML     lt  -- Wrap all page content here -- gt   lt div id  wrap  gt      lt  -- Fixed navbar -- gt     lt div class  navbar navbar-default navbar-fixed-top  gt       lt div class  container  gt         lt div class  navbar-header  gt           lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt             lt span class  icon-bar  gt  lt  span gt             lt span class  icon-bar  gt  lt  span gt             lt span class  icon-bar  gt  lt  span gt           lt  button gt           lt a class  navbar-brand  href     gt Project name lt  a gt         lt  div gt         lt div class  collapse navbar-collapse  gt           lt ul class  nav navbar-nav  gt             lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt             lt li gt  lt a href   about  gt About lt  a gt  lt  li gt             lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt             lt li class  dropdown  gt               lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt               lt ul class  dropdown-menu  gt                 lt li gt  lt a href     gt Action lt  a gt  lt  li gt                 lt li gt  lt a href     gt Another action lt  a gt  lt  li gt                 lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt                 lt li class  divider  gt  lt  li gt                 lt li class  dropdown-header  gt Nav header lt  li gt                 lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt                 lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt               lt  ul gt             lt  li gt           lt  ul gt         lt  div gt  lt  --  nav-collapse -- gt       lt  div gt     lt  div gt      lt  -- Begin page content -- gt     lt div class  container  gt       lt div class  page-header  gt         lt h1 gt Sticky footer with fixed navbar lt  h1 gt       lt  div gt       lt p class  lead  gt Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS  A fixed navbar has been added within  lt code gt  wrap lt  code gt  with  lt code gt padding-top  60px  lt  code gt  on the  lt code gt  container lt  code gt   lt  p gt      lt  div gt   lt table class  table  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 Username 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 Mark lt  td gt               lt td gt Otto lt  td gt               lt td gt  mdo lt  td gt             lt  tr gt             lt tr gt               lt td gt 2 lt  td gt               lt td gt Jacob lt  td gt               lt td gt Thornton lt  td gt               lt td gt  fat lt  td gt             lt  tr gt             lt tr gt               lt td gt 3 lt  td gt               lt td gt Larry lt  td gt               lt td gt the Bird lt  td gt               lt td gt  twitter lt  td gt             lt  tr gt             lt tr gt               lt td gt 1 lt  td gt               lt td gt Mark lt  td gt               lt td gt Otto lt  td gt               lt td gt  mdo lt  td gt             lt  tr gt             lt tr gt               lt td gt 2 lt  td gt               lt td gt Jacob lt  td gt               lt td gt Thornton lt  td gt               lt td gt  fat lt  td gt             lt  tr gt             lt tr gt               lt td gt 3 lt  td gt               lt td gt Larry lt  td gt               lt td gt the Bird lt  td gt               lt td gt  twitter lt  td gt             lt  tr gt             lt tr gt               lt td gt 1 lt  td gt               lt td gt Mark lt  td gt               lt td gt Otto lt  td gt               lt td gt  mdo lt  td gt             lt  tr gt             lt tr gt               lt td gt 2 lt  td gt               lt td gt Jacob lt  td gt               lt td gt Thornton lt  td gt               lt td gt  fat lt  td gt             lt  tr gt             lt tr gt               lt td gt 3 lt  td gt               lt td gt Larry lt  td gt               lt td gt the Bird lt  td gt               lt td gt  twitter lt  td gt             lt  tr gt             lt tr gt               lt td gt 1 lt  td gt               lt td gt Mark lt  td gt               lt td gt Otto lt  td gt               lt td gt  mdo lt  td gt             lt  tr gt             lt tr gt               lt td gt 2 lt  td gt               lt td gt Jacob lt  td gt               lt td gt Thornton lt  td gt               lt td gt  fat lt  td gt             lt  tr gt             lt tr gt               lt td gt 3 lt  td gt               lt td gt Larry lt  td gt               lt td gt the Bird lt  td gt               lt td gt  twitter lt  td gt             lt  tr gt           lt  tbody gt         lt  table gt   lt  div gt    lt div id  footer  gt     lt div class  container  gt       lt p class  text-muted credit  gt Example courtesy  lt a href  http   martinbean co uk  gt Martin Bean lt  a gt  and  lt a href  http   ryanfait com sticky-footer   gt Ryan Fait lt  a gt   lt  p gt     lt  div gt   lt  div gt

User · Answer

If you want to have an affix on your header you can use this tricks, add position: relative on your th and change the position in eventListener('scroll')

I have created an example: https://codesandbox.io/s/rl1jjx0o

I use vue.js but you can use this, without vue.js

User · Answer

Use  https   github com mkoryak floatThead Docs  http   mkoryak github io floatThead examples bootstrap3    document  ready function         quot  sticky-header quot   floatThead  top 50         DEMO with 2 Tables and Fixed Header   http   jsbin com zuzuqe 1  http   jsbin com zuzuqe 1 edit  HTML  lt  -- Fixed navbar -- gt   lt div class  quot navbar navbar-default navbar-fixed-top quot  gt     lt div class  quot container quot  gt       lt div class  quot navbar-header quot  gt         lt button type  quot button quot  class  quot navbar-toggle quot  data-toggle  quot collapse quot  data-target  quot  navbar-collapse quot  gt           lt span class  quot icon-bar quot  gt  lt  span gt           lt span class  quot icon-bar quot  gt  lt  span gt           lt span class  quot icon-bar quot  gt  lt  span gt         lt  button gt         lt a class  quot navbar-brand quot  href  quot   quot  gt Project name lt  a gt       lt  div gt       lt div class  quot collapse navbar-collapse quot  gt         lt ul class  quot nav navbar-nav quot  gt           lt li class  quot active quot  gt  lt a href  quot   quot  gt Home lt  a gt  lt  li gt           lt li gt  lt a href  quot  about quot  gt About lt  a gt  lt  li gt           lt li gt  lt a href  quot  contact quot  gt Contact lt  a gt  lt  li gt           lt li class  quot dropdown quot  gt             lt a href  quot   quot  class  quot dropdown-toggle quot  data-toggle  quot dropdown quot  gt Dropdown  lt b class  quot caret quot  gt  lt  b gt  lt  a gt             lt ul class  quot dropdown-menu quot  gt               lt li gt  lt a href  quot   quot  gt Action lt  a gt  lt  li gt               lt li gt  lt a href  quot   quot  gt Another action lt  a gt  lt  li gt               lt li gt  lt a href  quot   quot  gt Something else here lt  a gt  lt  li gt               lt li class  quot divider quot  gt  lt  li gt               lt li class  quot dropdown-header quot  gt Nav header lt  li gt               lt li gt  lt a href  quot   quot  gt Separated link lt  a gt  lt  li gt               lt li gt  lt a href  quot   quot  gt One more separated link lt  a gt  lt  li gt             lt  ul gt           lt  li gt         lt  ul gt       lt  div gt       lt  --  nav-collapse -- gt     lt  div gt   lt  div gt    lt  -- Begin page content -- gt   lt div class  quot container quot  gt     lt div class  quot page-header quot  gt       lt h1 gt Sticky footer with fixed navbar lt  h1 gt     lt  div gt     lt p class  quot lead quot  gt Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS  A fixed navbar has been added within  lt code gt  wrap lt  code gt  with  lt code gt padding-top  60px  lt  code gt  on the  lt code gt  container lt  code gt   lt  p gt     lt table class  quot table table-striped sticky-header quot  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 Username 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 Mark lt  td gt           lt td gt Otto lt  td gt           lt td gt  mdo lt  td gt         lt  tr gt         lt tr gt           lt td gt 2 lt  td gt           lt td gt Jacob lt  td gt           lt td gt Thornton lt  td gt           lt td gt  fat lt  td gt         lt  tr gt         lt tr gt           lt td gt 3 lt  td gt           lt td gt Larry lt  td gt           lt td gt the Bird lt  td gt           lt td gt  twitter lt  td gt         lt  tr gt         lt tr gt           lt td gt 1 lt  td gt           lt td gt Mark lt  td gt           lt td gt Otto lt  td gt           lt td gt  mdo lt  td gt         lt  tr gt         lt tr gt           lt td gt 2 lt  td gt           lt td gt Jacob lt  td gt           lt td gt Thornton lt  td gt           lt td gt  fat lt  td gt         lt  tr gt         lt tr gt           lt td gt 3 lt  td gt           lt td gt Larry lt  td gt           lt td gt the Bird lt  td gt           lt td gt  twitter lt  td gt         lt  tr gt         lt tr gt           lt td gt 1 lt  td gt           lt td gt Mark lt  td gt           lt td gt Otto lt  td gt           lt td gt  mdo lt  td gt         lt  tr gt         lt tr gt           lt td gt 2 lt  td gt           lt td gt Jacob lt  td gt           lt td gt Thornton lt  td gt           lt td gt  fat lt  td gt         lt  tr gt         lt tr gt           lt td gt 3 lt  td gt           lt td gt Larry lt  td gt           lt td gt the Bird lt  td gt           lt td gt  twitter lt  td gt         lt  tr gt         lt tr gt           lt td gt 1 lt  td gt           lt td gt Mark lt  td gt           lt td gt Otto lt  td gt           lt td gt  mdo lt  td gt         lt  tr gt         lt tr gt           lt td gt 2 lt  td gt           lt td gt Jacob lt  td gt           lt td gt Thornton lt  td gt           lt td gt  fat lt  td gt         lt  tr gt         lt tr gt           lt td gt 3 lt  td gt           lt td gt Larry lt  td gt           lt td gt the Bird lt  td gt           lt td gt  twitter lt  td gt         lt  tr gt       lt  tbody gt     lt  table gt      lt h3 gt Table 2 lt  h3 gt      lt table class  quot table table-striped sticky-header quot  gt       lt thead gt         lt tr gt           lt th gt   lt  th gt           lt th gt New Table lt  th gt           lt th gt Last Name lt  th gt           lt th gt Username 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 Mark lt  td gt           lt td gt Otto lt  td gt           lt td gt  mdo lt  td gt         lt  tr gt         lt tr gt           lt td gt 2 lt  td gt           lt td gt Jacob lt  td gt           lt td gt Thornton lt  td gt           lt td gt  fat lt  td gt         lt  tr gt         lt tr gt           lt td gt 3 lt  td gt           lt td gt Larry lt  td gt           lt td gt the Bird lt  td gt           lt td gt  twitter lt  td gt         lt  tr gt         lt tr gt           lt td gt 1 lt  td gt           lt td gt Mark lt  td gt           lt td gt Otto lt  td gt           lt td gt  mdo lt  td gt         lt  tr gt         lt tr gt           lt td gt 2 lt  td gt           lt td gt Jacob lt  td gt           lt td gt Thornton lt  td gt           lt td gt  fat lt  td gt         lt  tr gt         lt tr gt           lt td gt 3 lt  td gt           lt td gt Larry lt  td gt           lt td gt the Bird lt  td gt           lt td gt  twitter lt  td gt         lt  tr gt         lt tr gt           lt td gt 1 lt  td gt           lt td gt Mark lt  td gt           lt td gt Otto lt  td gt           lt td gt  mdo lt  td gt         lt  tr gt         lt tr gt           lt td gt 2 lt  td gt           lt td gt Jacob lt  td gt           lt td gt Thornton lt  td gt           lt td gt  fat lt  td gt         lt  tr gt         lt tr gt           lt td gt 3 lt  td gt           lt td gt Larry lt  td gt           lt td gt the Bird lt  td gt           lt td gt  twitter lt  td gt         lt  tr gt         lt tr gt           lt td gt 1 lt  td gt           lt td gt Mark lt  td gt           lt td gt Otto lt  td gt           lt td gt  mdo lt  td gt         lt  tr gt         lt tr gt           lt td gt 2 lt  td gt           lt td gt Jacob lt  td gt           lt td gt Thornton lt  td gt           lt td gt  fat lt  td gt         lt  tr gt         lt tr gt           lt td gt 3 lt  td gt           lt td gt Larry lt  td gt           lt td gt the Bird lt  td gt           lt td gt  twitter lt  td gt         lt  tr gt       lt  tbody gt     lt  table gt   lt  div gt    CSS body    padding-top 50px    table floatThead-table     border-top  none    border-bottom  none    background-color   fff

User · Answer

Here is a jsfiddle HERE  not created by me  that does what you are looking for with pure css in a table   The thing to note here is the th header is set to a height of 0  Inside each th is and absolute positioned div that puts the header above the table and the scollable div that the table is in    lt thead gt     lt tr gt       lt th gt   lt div gt   lt  div gt  lt  th gt       lt th gt First Name lt div gt First Name lt  div gt  lt  th gt       lt th gt Last Name lt div gt Last Name lt  div gt  lt  th gt       lt th gt Username lt div gt Username lt  div gt  lt  th gt     lt  tr gt   lt  thead gt

User · Answer

You can do it easily with puse CSS without any kind of JS. you have to add position: sticky; top: 0; z-index:999; in table th . But this won't work on Chrome Browser but other browser. To work on chrome you have to add those code in table thead th

_x000D_

.table-fixed {_x000D_
  width: 100%;_x000D_
}_x000D_
_x000D_
/*This will work on every browser but Chrome Browser*/_x000D_
.table-fixed thead {_x000D_
  position: sticky;_x000D_
  position: -webkit-sticky;_x000D_
  top: 0;_x000D_
  z-index: 999;_x000D_
  background-color: #000;_x000D_
  color: #fff;_x000D_
}_x000D_
_x000D_
/*This will work on every browser*/_x000D_
.table-fixed thead th {_x000D_
    position: sticky;_x000D_
    position: -webkit-sticky;_x000D_
    top: 0;_x000D_
    z-index: 999;_x000D_
    background-color: #000;_x000D_
    color: #fff;_x000D_
}

_x000D_

<table class="table-fixed">_x000D_
  <thead>_x000D_
    <tr>_x000D_
        <th>Table Header 1</th>_x000D_
        <th>Table Header 2</th>_x000D_
        <th>Table Header 3</th>_x000D_
    </tr>_x000D_
  </thead>_x000D_
  <tbody>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
        <td>Data</td>_x000D_
    </tr>_x000D_
  </tbody>_x000D_
</table>

_x000D_

User · Answer

This can now be done without JS  just pure CSS  So  anyone trying to do this for modern browsers should look into using position  sticky instead   Currently  both Edge and Chrome have a bug where position  sticky doesn t work on thead or tr elements  however it s possible to use it on th elements  so all you need to do is just add this to your code   th     position  sticky    top  50px      0px if you don t have a navbar  but something is required      background  white      Note  you ll need a background color for them  or you ll be able to see through the sticky title bar   This has very good browser support   Demo with your code  HTML unaltered  above 5 lines of CSS added  all JS removed     x000D   x000D  body   x000D      padding-top 50px  x000D    x000D  table floatThead-table   x000D      border-top  none  x000D      border-bottom  none  x000D      background-color   fff  x000D    x000D   x000D  th   x000D    position  sticky  x000D    top  50px  x000D    background  white  x000D    x000D   lt link rel  stylesheet  type  text css  href    netdna bootstrapcdn com bootstrap 3 0 0 css bootstrap min css  gt  x000D   x000D   lt  -- Fixed navbar -- gt  x000D   lt div class  navbar navbar-default navbar-fixed-top  gt  x000D       lt div class  container  gt  x000D           lt div class  navbar-header  gt  x000D               lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt   lt span class  icon-bar  gt  lt  span gt  x000D    lt span class  icon-bar  gt  lt  span gt  x000D    lt span class  icon-bar  gt  lt  span gt  x000D   x000D               lt  button gt   lt a class  navbar-brand  href     gt Project name lt  a gt  x000D   x000D           lt  div gt  x000D           lt div class  collapse navbar-collapse  gt  x000D               lt ul class  nav navbar-nav  gt  x000D                   lt li class  active  gt  lt a href     gt Home lt  a gt  x000D   x000D                   lt  li gt  x000D                   lt li gt  lt a href   about  gt About lt  a gt  x000D   x000D                   lt  li gt  x000D                   lt li gt  lt a href   contact  gt Contact lt  a gt  x000D   x000D                   lt  li gt  x000D                   lt li class  dropdown  gt   lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt  x000D   x000D                       lt ul class  dropdown-menu  gt  x000D                           lt li gt  lt a href     gt Action lt  a gt  x000D   x000D                           lt  li gt  x000D                           lt li gt  lt a href     gt Another action lt  a gt  x000D   x000D                           lt  li gt  x000D                           lt li gt  lt a href     gt Something else here lt  a gt  x000D   x000D                           lt  li gt  x000D                           lt li class  divider  gt  lt  li gt  x000D                           lt li class  dropdown-header  gt Nav header lt  li gt  x000D                           lt li gt  lt a href     gt Separated link lt  a gt  x000D   x000D                           lt  li gt  x000D                           lt li gt  lt a href     gt One more separated link lt  a gt  x000D   x000D                           lt  li gt  x000D                       lt  ul gt  x000D                   lt  li gt  x000D               lt  ul gt  x000D           lt  div gt  x000D           lt  --  nav-collapse -- gt  x000D       lt  div gt  x000D   lt  div gt  x000D   lt  -- Begin page content -- gt  x000D   lt div class  container  gt  x000D       lt div class  page-header  gt  x000D            lt h1 gt Sticky Table Headers lt  h1 gt  x000D   x000D       lt  div gt  x000D       lt p class  lead  gt If the page is tall and all of the table is visible  then it won t stick  Make your viewport short  lt  p gt  x000D       lt p class  lead  gt If the page is tall and all of the table is visible  then it won t stick  Make your viewport short  lt  p gt  x000D       lt p class  lead  gt If the page is tall and all of the table is visible  then it won t stick  Make your viewport short  lt  p gt  x000D       lt table class  table table-striped sticky-header  gt  x000D           lt thead gt  x000D               lt tr gt  x000D                   lt th gt   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 Username lt  th gt  x000D               lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D               lt tr gt  x000D                   lt td gt 1 lt  td gt  x000D                   lt td gt Mark lt  td gt  x000D                   lt td gt Otto lt  td gt  x000D                   lt td gt  mdo lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 2 lt  td gt  x000D                   lt td gt Jacob lt  td gt  x000D                   lt td gt Thornton lt  td gt  x000D                   lt td gt  fat lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 3 lt  td gt  x000D                   lt td gt Larry lt  td gt  x000D                   lt td gt the Bird lt  td gt  x000D                   lt td gt  twitter lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 1 lt  td gt  x000D                   lt td gt Mark lt  td gt  x000D                   lt td gt Otto lt  td gt  x000D                   lt td gt  mdo lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 2 lt  td gt  x000D                   lt td gt Jacob lt  td gt  x000D                   lt td gt Thornton lt  td gt  x000D                   lt td gt  fat lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 3 lt  td gt  x000D                   lt td gt Larry lt  td gt  x000D                   lt td gt the Bird lt  td gt  x000D                   lt td gt  twitter lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 1 lt  td gt  x000D                   lt td gt Mark lt  td gt  x000D                   lt td gt Otto lt  td gt  x000D                   lt td gt  mdo lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 2 lt  td gt  x000D                   lt td gt Jacob lt  td gt  x000D                   lt td gt Thornton lt  td gt  x000D                   lt td gt  fat lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 3 lt  td gt  x000D                   lt td gt Larry lt  td gt  x000D                   lt td gt the Bird lt  td gt  x000D                   lt td gt  twitter lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 1 lt  td gt  x000D                   lt td gt Mark lt  td gt  x000D                   lt td gt Otto lt  td gt  x000D                   lt td gt  mdo lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 2 lt  td gt  x000D                   lt td gt Jacob lt  td gt  x000D                   lt td gt Thornton lt  td gt  x000D                   lt td gt  fat lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 3 lt  td gt  x000D                   lt td gt Larry lt  td gt  x000D                   lt td gt the Bird lt  td gt  x000D                   lt td gt  twitter lt  td gt  x000D               lt  tr gt  x000D           lt  tbody gt  x000D       lt  table gt  x000D       lt p class  lead  gt If the page is tall and all of the table is visible  then it won t stick  Make your viewport short  lt  p gt  x000D       lt p class  lead  gt If the page is tall and all of the table is visible  then it won t stick  Make your viewport short  lt  p gt  x000D       lt p class  lead  gt If the page is tall and all of the table is visible  then it won t stick  Make your viewport short  lt  p gt  x000D       lt p class  lead  gt If the page is tall and all of the table is visible  then it won t stick  Make your viewport short  lt  p gt  x000D       lt p class  lead  gt If the page is tall and all of the table is visible  then it won t stick  Make your viewport short  lt  p gt  x000D       lt p class  lead  gt If the page is tall and all of the table is visible  then it won t stick  Make your viewport short  lt  p gt  x000D       lt p class  lead  gt If the page is tall and all of the table is visible  then it won t stick  Make your viewport short  lt  p gt  x000D        lt h3 gt Table 2 lt  h3 gt  x000D   x000D       lt table class  table table-striped sticky-header  gt  x000D           lt thead gt  x000D               lt tr gt  x000D                   lt th gt   lt  th gt  x000D                   lt th gt New Table lt  th gt  x000D                   lt th gt Last Name lt  th gt  x000D                   lt th gt Username lt  th gt  x000D               lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D               lt tr gt  x000D                   lt td gt 1 lt  td gt  x000D                   lt td gt Mark lt  td gt  x000D                   lt td gt Otto lt  td gt  x000D                   lt td gt  mdo lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 2 lt  td gt  x000D                   lt td gt Jacob lt  td gt  x000D                   lt td gt Thornton lt  td gt  x000D                   lt td gt  fat lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 3 lt  td gt  x000D                   lt td gt Larry lt  td gt  x000D                   lt td gt the Bird lt  td gt  x000D                   lt td gt  twitter lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 1 lt  td gt  x000D                   lt td gt Mark lt  td gt  x000D                   lt td gt Otto lt  td gt  x000D                   lt td gt  mdo lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 2 lt  td gt  x000D                   lt td gt Jacob lt  td gt  x000D                   lt td gt Thornton lt  td gt  x000D                   lt td gt  fat lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 3 lt  td gt  x000D                   lt td gt Larry lt  td gt  x000D                   lt td gt the Bird lt  td gt  x000D                   lt td gt  twitter lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 1 lt  td gt  x000D                   lt td gt Mark lt  td gt  x000D                   lt td gt Otto lt  td gt  x000D                   lt td gt  mdo lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 2 lt  td gt  x000D                   lt td gt Jacob lt  td gt  x000D                   lt td gt Thornton lt  td gt  x000D                   lt td gt  fat lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 3 lt  td gt  x000D                   lt td gt Larry lt  td gt  x000D                   lt td gt the Bird lt  td gt  x000D                   lt td gt  twitter lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 1 lt  td gt  x000D                   lt td gt Mark lt  td gt  x000D                   lt td gt Otto lt  td gt  x000D                   lt td gt  mdo lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 2 lt  td gt  x000D                   lt td gt Jacob lt  td gt  x000D                   lt td gt Thornton lt  td gt  x000D                   lt td gt  fat lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt 3 lt  td gt  x000D                   lt td gt Larry lt  td gt  x000D                   lt td gt the Bird lt  td gt  x000D                   lt td gt  twitter lt  td gt  x000D               lt  tr gt  x000D           lt  tbody gt  x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Anyone looking for this functionality past 2018  it s much cleaner to do this with just CSS using position  sticky  position  sticky doesn t work with some table elements  thead tr  in Chrome  You can move sticky to tds ths of tr you need to be sticky  Like this  thead tr nth-child 1  th     background  white    position  sticky    top  0    z-index  10

User · Answer

Okku s post worked for me in Edge  In order to get desired result on the iPhone  I had to use    lt thead class  sticky-top  gt    which didn t effect Edge

User · Answer

I accomplished something similar using jQuery Waypoints.

There's a lot of moving parts, and quite a bit of logic (that I hope to get on GitHub some day soon), but essentially what you could do is...

Duplicate the table DOM structure in JavaScript and add a class called fixed.
Add styles for table.fixed that make it invisible.
Set a way point at the bottom of the header navigation that adds a class called sticky to table.fixed
Add styles for table.sticky.fixed that position it just below the navbar and also make just the thead content visible. This also has a z-index so it is laid above the rest of the content.
Add another waypoint, but in the downward scroll event, that removes .sticky from the table.fixed

You have to duplicate the entire table DOM in order to ensure column widths line up appropriately.

If that sounds really complicated, you might want to try playing around with the DataTables plugin and the FixedHeader extension: https://datatables.net/extensions/fixedheader/

User · Answer

x000D   x000D   contents     width  50     border  1px solid black    height  300px    overflow  auto     table     position  relative     th     position  sticky    top  0    background   ffffff    x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt   lt div class  contents  gt     lt table class  table  gt       lt thead gt         lt tr gt           lt th gt colunn 1 lt  th gt           lt th gt colunn 2 lt  th gt           lt th gt colunn 3 lt  th gt           lt th gt colunn 4 lt  th gt         lt  tr gt       lt  thead gt       lt tbody gt         lt tr gt           lt td gt Example 1 lt  td gt           lt td gt Example 2 lt  td gt           lt td gt Example 3 lt  td gt           lt td gt Example 4 lt  td gt           lt tr gt             lt tr gt               lt td gt Example 1 lt  td gt               lt td gt Example 2 lt  td gt               lt td gt Example 3 lt  td gt               lt td gt Example 4 lt  td gt               lt tr gt                 lt tr gt                   lt td gt Example 1 lt  td gt                   lt td gt Example 2 lt  td gt                   lt td gt Example 3 lt  td gt                   lt td gt Example 4 lt  td gt                   lt tr gt                     lt tr gt                       lt td gt Example 1 lt  td gt                       lt td gt Example 2 lt  td gt                       lt td gt Example 3 lt  td gt                       lt td gt Example 4 lt  td gt                       lt tr gt                         lt tr gt                           lt td gt Example 1 lt  td gt                           lt td gt Example 2 lt  td gt                           lt td gt Example 3 lt  td gt                           lt td gt Example 4 lt  td gt                           lt tr gt                             lt tr gt                               lt td gt Example 1 lt  td gt                               lt td gt Example 2 lt  td gt                               lt td gt Example 3 lt  td gt                               lt td gt Example 4 lt  td gt                               lt tr gt                                 lt tr gt                                   lt td gt Example 1 lt  td gt                                   lt td gt Example 2 lt  td gt                                   lt td gt Example 3 lt  td gt                                   lt td gt Example 4 lt  td gt                                   lt tr gt                                     lt tr gt                                       lt td gt Example 1 lt  td gt                                       lt td gt Example 2 lt  td gt                                       lt td gt Example 3 lt  td gt                                       lt td gt Example 4 lt  td gt                                       lt tr gt                                         lt tr gt                                           lt td gt Example 1 lt  td gt                                           lt td gt Example 2 lt  td gt                                           lt td gt Example 3 lt  td gt                                           lt td gt Example 4 lt  td gt                                           lt tr gt                                             lt tr gt                                               lt td gt Example 1 lt  td gt                                               lt td gt Example 2 lt  td gt                                               lt td gt Example 3 lt  td gt                                               lt td gt Example 4 lt  td gt                                               lt tr gt       lt  tbody gt     lt  table gt   lt  div gt  x000D   x000D   x000D

User · Answer

I faced the same issue and as majority of the answers indicated, you have to apply position: sticky; and top: 0; ( mostly but can vary if there is a navbar which is fixed as well) to 'th' element. These properties do not apply to thead or tr.

One more thing, if it still doesn't work, you have to look for 'overflow' properties of the parent. If any parent component has an overflow set, i.e. overflow: hidden, then position: sticky just doesn't work. Make sure to remove all such parent properties. Chao!

[css] How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?

Working Fiddle after referring to the answer!

The answer is

Examples related to css

Examples related to twitter-bootstrap

Examples related to css-position

Examples related to html-table

Tags