How to display scroll bar onto a html table

Question

I am writing a page where I need an html table to maintain a set size  I need the headers at the top of the table to stay there at all times but I also need the body of the table to scroll no matter how many rows are added to the table  I want it to look like method 2 in this url  http   www cssplay co uk menu tablescroll html I have tried doing this but no scrollbar appears   x000D   x000D  tbody     height  80em    overflow  scroll    x000D   lt table border 1 id  qandatbl  align  center  gt     lt tr gt       lt th class  col1  gt Question No lt  th gt       lt th class  col2  gt Option Type lt  th gt       lt th class  col1  gt Duration lt  th gt     lt  tr gt      lt tbody gt       lt tr gt         lt td class  qid  gt  lt  td gt         lt td class  options  gt  lt  td gt         lt td class  duration  gt  lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt  x000D   x000D   x000D

User · Answer

I resolved this problem by separating my content into two tables.

One table is the header row.

The seconds is also <table> tag, but wrapped by <div> with static height and overflow scroll.

User · Answer

just add on table   style  overflow-x auto      x000D   x000D   lt table border 1 id  qandatbl  align  center  style  overflow-x auto   gt  x000D       lt tr gt  x000D       lt th class  col1  gt Question No lt  th gt  x000D       lt th class  col2  gt Option Type lt  th gt  x000D       lt th class  col1  gt Duration lt  th gt  x000D       lt  tr gt  x000D   x000D      lt tbody gt  x000D       lt tr gt  x000D       lt td class  qid  gt  lt  td gt  x000D       lt td class  options  gt  lt  td gt  x000D       lt td class  duration  gt  lt  td gt  x000D       lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    style  overflow-x auto

User · Answer

The accepted answer provided a good starting point  but if you resize the frame  change the column widths  or even change the table data  the headers will get messed up in various ways  Every other example I ve seen has similar issues  or imposes some serious restrictions on the table s layout   I think I ve finally got all these problems solved  though  It took a lot of CSS  but the final product is about as reliable and easy to use as a normal table   Here s an example that has all the required features to replicate the table referenced by the OP  jsFiddle  The colors and borders would have to be changed to make it identical to the reference  Information on how to make those kinds of changes is provided in the CSS comments   Here s the code    x000D   x000D    the following html and body rule sets are required only if using a   width or height   x000D    html   x000D  width  100   x000D  height  100   x000D      x000D  body   x000D    box-sizing  border-box  x000D    width  100   x000D    height  100   x000D    margin  0  x000D    padding  0 20px 0 20px  x000D    text-align  center  x000D    background  white  x000D    x000D   scrollingtable   x000D    box-sizing  border-box  x000D    display  inline-block  x000D    vertical-align  middle  x000D    overflow  hidden  x000D    width  auto    if you want a fixed width  set it here  else set to auto   x000D    min-width  0  100       if you want a   width  set it here  else set to 0   x000D    height  188px  100       set table height here  can be fixed value or     x000D    min-height  0  104px      if using   height  make this large enough to fit scrollbar arrows   caption   thead   x000D    font-family  Verdana  Tahoma  sans-serif  x000D    font-size  15px  x000D    line-height  20px  x000D    padding  20px 0 20px 0    need enough padding to make room for caption   x000D    text-align  left  x000D    x000D   scrollingtable    box-sizing  border-box   x000D   scrollingtable  gt  div   x000D    position  relative  x000D    border-top  1px solid black  x000D    height  100   x000D    padding-top  20px    this determines column header height   x000D    x000D   scrollingtable  gt  div before   x000D    top  0  x000D    background  cornflowerblue    header row background color   x000D    x000D   scrollingtable  gt  div before  x000D   scrollingtable  gt  div  gt  div after   x000D    content      x000D    position  absolute  x000D    z-index  -1  x000D    width  100   x000D    height  100   x000D    left  0  x000D    x000D   scrollingtable  gt  div  gt  div   x000D    min-height  0  43px      if using   height  make this large enough to fit scrollbar arrows   x000D    max-height  100   x000D    overflow  scroll  auto      set to auto if using fixed or   width  else scroll   x000D    overflow-x  hidden  x000D    border  1px solid black    border around table body   x000D    x000D   scrollingtable  gt  div  gt  div after  background  white     match page background color   x000D   scrollingtable  gt  div  gt  div  gt  table   x000D    width  100   x000D    border-spacing  0  x000D    margin-top  -20px    inverse of column header height   x000D      margin-right  17px      uncomment if using   width   x000D    x000D   scrollingtable  gt  div  gt  div  gt  table  gt  caption   x000D    position  absolute  x000D    top  -20px    inverse of caption height   x000D    margin-top  -1px    inverse of border-width   x000D    width  100   x000D    font-weight  bold  x000D    text-align  center  x000D    x000D   scrollingtable  gt  div  gt  div  gt  table  gt     gt  tr  gt     padding  0   x000D   scrollingtable  gt  div  gt  div  gt  table  gt  thead   x000D    vertical-align  bottom  x000D    white-space  nowrap  x000D    text-align  center  x000D    x000D   scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt     gt  div   x000D    display  inline-block  x000D    padding  0 6px 0 6px    header cell padding   x000D    x000D   scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt   first-child before   x000D    content      x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    height  20px    match column header height   x000D    border-left  1px solid black    leftmost header border   x000D    x000D   scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt     gt  div label  before  x000D   scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt     gt  div  gt  div first-child  x000D   scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt       before   x000D    position  absolute  x000D    top  0  x000D    white-space  pre-wrap  x000D    color  white    header row font color   x000D    x000D   scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt     gt  div label  before  x000D   scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt     gt  div label  after  content  attr label    x000D   scrollingtable  gt  div  gt  div  gt  table  gt  thead  gt  tr  gt       before   x000D    content      x000D    display  block  x000D    min-height  20px    match column header height   x000D    padding-top  1px  x000D    border-left  1px solid black    borders between header cells   x000D    x000D   scrollingtable  scrollbarhead  float  right   x000D   scrollingtable  scrollbarhead before   x000D    position  absolute  x000D    width  100px  x000D    top  -1px    inverse border-width   x000D    background  white    match page background color   x000D    x000D   scrollingtable  gt  div  gt  div  gt  table  gt  tbody  gt  tr after   x000D    content      x000D    display  table-cell  x000D    position  relative  x000D    padding  0  x000D    border-top  1px solid black  x000D    top  -1px    inverse of border width   x000D    x000D   scrollingtable  gt  div  gt  div  gt  table  gt  tbody  vertical-align  top   x000D   scrollingtable  gt  div  gt  div  gt  table  gt  tbody  gt  tr  background  white   x000D   scrollingtable  gt  div  gt  div  gt  table  gt  tbody  gt  tr  gt      x000D    border-bottom  1px solid black  x000D    padding  0 6px 0 6px  x000D    height  20px    match column header height   x000D    x000D   scrollingtable  gt  div  gt  div  gt  table  gt  tbody last-of-type  gt  tr last-child  gt     border-bottom  none   x000D   scrollingtable  gt  div  gt  div  gt  table  gt  tbody  gt  tr nth-child even   background  gainsboro     alternate row color   x000D   scrollingtable  gt  div  gt  div  gt  table  gt  tbody  gt  tr  gt         border-left  1px solid black     borders between body cells   x000D   lt div class  scrollingtable  gt  x000D     lt div gt  x000D       lt div gt  x000D         lt table gt  x000D           lt caption gt Top Caption lt  caption gt  x000D           lt thead gt  x000D             lt tr gt  x000D               lt th gt  lt div label  Column 1  gt  lt  div gt  lt  th gt  x000D               lt th gt  lt div label  Column 2  gt  lt  div gt  lt  th gt  x000D               lt th gt  lt div label  Column 3  gt  lt  div gt  lt  th gt  x000D               lt th gt  x000D                 lt  --more versatile way of doing column label  requires 2 identical copies of label-- gt  x000D                 lt div gt  lt div gt Column 4 lt  div gt  lt div gt Column 4 lt  div gt  lt  div gt  x000D               lt  th gt  x000D               lt th class  scrollbarhead   gt   lt  --ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-- gt  x000D             lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt  x000D             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt  x000D             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt  x000D             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt  x000D             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt  x000D             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt  x000D             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt  x000D             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt  x000D             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt  x000D             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt  x000D             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt  x000D             lt tr gt  lt td gt Lorem ipsum lt  td gt  lt td gt Dolor lt  td gt  lt td gt Sit lt  td gt  lt td gt Amet consectetur lt  td gt  lt  tr gt  x000D           lt  tbody gt  x000D         lt  table gt  x000D       lt  div gt  x000D      Faux bottom caption x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt  -- if lte IE 9  gt  lt style gt  scrollingtable  gt  div  gt  div  gt  table  margin-right  17px   lt  style gt  lt   endif -- gt  x000D   x000D   x000D

User · Answer

You have to insert your  lt table gt  into a  lt div gt  that it has fixed size  and in  lt div gt  style you have to set overflow  scroll

User · Answer

Something like this   http   jsfiddle net TweNm   The idea is to wrap the  lt table gt  in a non-statically positioned  lt div gt  which has an overflow auto CSS property  Then position the elements in the  lt thead gt  absolutely    x000D   x000D   table-wrapper   x000D    position relative  x000D    x000D   table-scroll   x000D    height 150px  x000D    overflow auto    x000D    margin-top 20px  x000D    x000D   table-wrapper table   x000D    width 100   x000D   x000D    x000D   table-wrapper table     x000D    background yellow  x000D    color black  x000D    x000D   table-wrapper table thead th  text   x000D    position absolute     x000D    top -20px  x000D    z-index 2  x000D    height 20px  x000D    width 35   x000D    border 1px solid red  x000D    x000D   lt div id  table-wrapper  gt  x000D     lt div id  table-scroll  gt  x000D       lt table gt  x000D           lt thead gt  x000D               lt tr gt  x000D                   lt th gt  lt span class  text  gt A lt  span gt  lt  th gt  x000D                   lt th gt  lt span class  text  gt B lt  span gt  lt  th gt  x000D                   lt th gt  lt span class  text  gt C lt  span gt  lt  th gt  x000D               lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D             lt tr gt   lt td gt 1  0 lt  td gt   lt td gt 2  0 lt  td gt   lt td gt 3  0 lt  td gt   lt  tr gt  x000D             lt tr gt   lt td gt 1  1 lt  td gt   lt td gt 2  1 lt  td gt   lt td gt 3  1 lt  td gt   lt  tr gt  x000D             lt tr gt   lt td gt 1  2 lt  td gt   lt td gt 2  2 lt  td gt   lt td gt 3  2 lt  td gt   lt  tr gt  x000D             lt tr gt   lt td gt 1  3 lt  td gt   lt td gt 2  3 lt  td gt   lt td gt 3  3 lt  td gt   lt  tr gt  x000D             lt tr gt   lt td gt 1  4 lt  td gt   lt td gt 2  4 lt  td gt   lt td gt 3  4 lt  td gt   lt  tr gt  x000D             lt tr gt   lt td gt 1  5 lt  td gt   lt td gt 2  5 lt  td gt   lt td gt 3  5 lt  td gt   lt  tr gt  x000D             lt tr gt   lt td gt 1  6 lt  td gt   lt td gt 2  6 lt  td gt   lt td gt 3  6 lt  td gt   lt  tr gt  x000D             lt tr gt   lt td gt 1  7 lt  td gt   lt td gt 2  7 lt  td gt   lt td gt 3  7 lt  td gt   lt  tr gt  x000D             lt tr gt   lt td gt 1  8 lt  td gt   lt td gt 2  8 lt  td gt   lt td gt 3  8 lt  td gt   lt  tr gt  x000D             lt tr gt   lt td gt 1  9 lt  td gt   lt td gt 2  9 lt  td gt   lt td gt 3  9 lt  td gt   lt  tr gt  x000D             lt tr gt   lt td gt 1  10 lt  td gt   lt td gt 2  10 lt  td gt   lt td gt 3  10 lt  td gt   lt  tr gt  x000D             lt  -- etc    -- gt  x000D             lt tr gt   lt td gt 1  99 lt  td gt   lt td gt 2  99 lt  td gt   lt td gt 3  99 lt  td gt   lt  tr gt  x000D           lt  tbody gt  x000D       lt  table gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Worth noting  that depending on your purpose  mine was the autofill results of a searchbar  you may want the height to be changeable  and for the scrollbar to only exist if the height exceeds that   If you want that  replace height  x  with max-height  x   and overflow scroll with overflow auto   Additionally  you can use overflow-x and overflow-y if you want  and obviously the same thing works horizontally with width   x

User · Answer

If you get to the point where all the mentioned solutions don t work  as it got for me   do this    Create two tables  One for the header and another for the body Give the two tables different parent containers divs Style the second table s div to allow vertical scroll of its contents    Like this  in your HTML   lt div class  table-header-class  gt       lt table gt          lt thead gt             lt tr gt               lt th gt Ava lt  th gt               lt th gt Alexis lt  th gt               lt th gt Mcclure lt  th gt             lt  tr gt          lt  thead gt       lt  table gt   lt  div gt   lt div class  table-content-class  gt      lt table gt          lt tbody gt             lt tr gt               lt td gt I am the boss lt  td gt               lt td gt No  da-da is not the boss  lt  td gt               lt td gt Alexis  I am the boss  right  lt  td gt             lt  tr gt          lt  tbody gt       lt  table gt   lt  div gt    Then style the second table s parent to allow vertical scroll  in your CSS       table-content-class           overflow-y  scroll        use auto  or scroll  to allow vertical scrolling           overflow-x  hidden        disable horizontal scroll

User · Answer

The CSS  div  overflow-y scroll  overflow-x scroll  width 20px  height 30px    table  width 50px  height 50px     You can make the table and the DIV around the table be any size you want  just make sure that the DIV is smaller than the table  You MUST contain the table inside of the DIV

User · Answer

Not sure why no one mentioned to just use the built-in sticky header style for  elements  Worked great for me   tableContainerDiv      overflow  auto     max-height  80em    th      position  sticky     top  0     background  white     Put a min-width on the  in  media if you need to make responsive  or similar   see Table headers position sticky or Position Sticky and Table Headers

User · Answer

Very easy  just wrap the table in a div that has overflow-y scroll  and overflow-x scroll properties  and make the div have a width and length smaller than the table  IT WILL WORK

[html] How to display scroll bar onto a html table

Examples related to html

Examples related to css

Examples related to scroll

Examples related to html-table

Examples related to overflow