add scroll bar to table body

Question

I want to do this as easily as possible with out any additional libraries   In my very long table I want to add a scrollbar to the  lt tbody gt  tag  so that the head is always visible but it wont work  can you please help   fiddle   http   jsfiddle net Hpx4L    lt table border  1  gt     lt thead gt       lt tr gt         lt th gt Month lt  th gt         lt th gt Savings lt  th gt       lt  tr gt     lt  thead gt     lt tfoot gt       lt tr gt         lt td gt Sum lt  td gt         lt td gt  180 lt  td gt       lt  tr gt     lt  tfoot gt     lt tbody style  overflow-y scroll  height 100px   gt   lt  -- wont work -- gt       lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt             lt tr gt         lt td gt January lt  td gt         lt td gt  100 lt  td gt       lt  tr gt       lt tr gt         lt td gt February lt  td gt         lt td gt  80 lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt

User · Accepted Answer

you can wrap the content of the  lt tbody gt  in a scrollable  lt div gt     html        lt tbody gt     lt tr gt       lt td colspan  2  gt         lt div class  scrollit  gt           lt table gt             lt tr gt               lt td gt January lt  td gt               lt td gt  100 lt  td gt             lt  tr gt             lt tr gt               lt td gt February lt  td gt               lt td gt  80 lt  td gt             lt  tr gt             lt tr gt               lt td gt January lt  td gt               lt td gt  100 lt  td gt             lt  tr gt             lt tr gt               lt td gt February lt  td gt               lt td gt  80 lt  td gt             lt  tr gt                  css   scrollit       overflow scroll      height 100px      see my jsfiddle  forked from yours  http   jsfiddle net VTNax 2

User · Answer

If you don t want to wrap a table under any div   table    table-layout  fixed    tbody        display  block      overflow  auto

User · Answer

This is because you are adding your  lt tbody gt  tag before  lt td gt  in table you cannot print any data without  lt td gt    So for that you have to make a  lt div gt  say  header with position  fixed    header          position  fixed       make another  lt div gt  which will act as  lt tbody gt   tbody       overflow scroll      Now your header is fixed and the body will scroll  And the header will remain there

User · Answer

These solutions often have issues with the header columns aligning with the body columns  and may not work properly when resizing   I know you didn t want to use an additional library  but if you happen to be using jQuery  this one is really small   It supports fixed header  footer  column spanning  colspan   horizontal scrolling  resizing  and an optional number of rows to display before scrolling starts   jQuery scrollTableBody  GitHub   As long as you have a table with proper  lt thead gt    lt tbody gt   and  optional   lt tfoot gt   all you need to do is this      table   scrollTableBody

[html] add scroll bar to table body

Examples related to html

Examples related to css