How to make html table vertically scrollable

Question

see jsbin  I have to make my html table vertically scrollable  I have used below code on tbody tag but its doesn t work for me    lt tbody style  height  100px  overflow  auto  gt

User · Answer

The best way to do this is strictly separate your table into two different tables - header and body:

<div class="header">
  <table><tr><!-- th here --></tr></table>
</div>

<div class="body">
  <table><tr><!-- td here --></tr></table>
</div>

.body {
  height: 100px;
  overflow: auto
}

If your table has a big width (more than screen width), then you have to add scroll events for horizontal scrolling header and body synchroniously.

You should never touch table tags (table, tbody, thead, tfoot, tr) with CSS properties display and overflow. Dealing with DIV wrappers is much more preferable.

User · Answer

Why don t you place your table in a div    lt div style  height 100px overflow auto   gt        Your code goes here       lt  div gt

User · Answer

Hi try with this overflow-y  scroll  I hope it may helps you

User · Answer

Try this one   It is working    Here JSBIN  table tbody   height 300px  overflow-y scroll  display block    table thead   display block

User · Answer

The jQuery plugin is probably the best option  http   farinspace com jquery-scrollable-table-plugin   To fixing header you can check this post   Fixing Header of GridView or HtmlTable  there might be issue that this should work in IE only   CSS for fixing header   div gridPanel       width 900px     overflow scroll     position relative      div gridPanel th        top  expression document getElementById  gridPanel   scrollTop-2      left expression parentNode parentNode parentNode parentNode scrollLeft      position  relative     z-index  20        lt div height  200px  id  gridPanel  runat  server  scrollbars  Auto  width  100px  gt  table    lt  div gt    or  Very good post is here for this   How to Freeze Columns Using JavaScript and HTML   or  No its not possible but you can make use of div and put table in div    lt div style  height  100px  overflow  auto  gt     lt table style  height  500px   gt            lt  table gt   lt  div gt

User · Answer

Here s my solution  in Spring with Thymeleaf and jQuery    html    lt  DOCTYPE html gt   lt html     xmlns th  http   www thymeleaf org      xmlns tiles  http   www thymeleaf org  gt       lt body gt           lt div id  objects  th fragment  ObjectList  gt               lt br  gt               lt div id  cap  gt                   lt span gt Objects lt  span gt               lt  div gt               lt div id  hdr  gt                   lt div gt                       lt div class  Cell  gt Name lt  div gt                           lt div class  Cell  gt Type lt  div gt                   lt  div gt               lt  div gt               lt div id  bdy  gt                   lt div th each  object     objectlist   gt                           lt div class  Cell  th text    object name   gt name lt  div gt                           lt div class  Cell  th text    object type   gt type lt  div gt                   lt  div gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt     css    CHARSET  UTF-8    cap span       display  table-caption      border 2px solid      font-size  200       padding  3px     hdr       display block      padding 0px      margin-left 0      border 2px solid     bdy       display block      padding 0px      margin-left 0      border 2px solid     objects  bdy       height 300px      overflow-y  auto     hdr div div      margin-left -3px      margin-right -3px      text-align  right     hdr div first-child       text-align  left     bdy div div       margin-left -3px      margin-right -3px      text-align  right     bdy div div first-child       text-align  left     Cell       display  table-cell      border  solid      border-width  thin      padding-left  5px      padding-right  5px      javascript     document  ready function        var divs      objects        divs forEach function div                if    div  length  gt  0                        var widths                   var totalWidth   0                div    hdr div div   each function                     widths push   this  width                                  div    bdy div div   each function                     var col     this  index                    if     this  width    gt  widths col                                          widths col      this  width                                                    div    hdr div div   each function                     var newWidth   widths   this  index    5                    this  css  width   newWidth                   totalWidth      this  outerWidth                                  div    bdy div div   each function                       this  css  width   widths   this  index    5                                 div    hdr   css  width   totalWidth                 div    bdy   css  width   totalWidth    div    bdy   css  overflow-y     auto  15 0

User · Answer

Just add the display block to the thead   tr and tbody  check the below example  http   www imaputz com cssStuff bigFourVersion html

User · Answer

This is a work around   http   jsfiddle net JJV59 2    EDIT    lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta charset utf-8   gt   lt title gt JS Bin lt  title gt   lt  -- if IE  gt     lt script src  http   html5shiv googlecode com svn trunk html5 js  gt  lt  script gt   lt   endif -- gt    lt  head gt   lt body gt    lt table cellspacing  1  width  100   bgcolor   cccccc  gt       lt thead gt           lt tr gt               lt td bgcolor   ffffff  width  70px  gt               lt  td gt               lt td class  csstablelisttd  width  70px  gt                   lt b gt Time Slot amp nbsp  lt  b gt               lt  td gt               lt td class  csstablelisttd  gt                   lt b gt  amp nbsp Patient Name lt  b gt               lt  td gt           lt  tr gt       lt  thead gt   lt  table gt   lt  -- THIS GIVES THE SCROLLER -- gt   lt div style  height  500px  overflow-y  auto  gt       lt table id  tableAppointment  cellspacing  1  width  100   bgcolor   cccccc  gt            lt tbody gt               lt tr gt                   lt td class  csstablelisttd  valign  top  width  70px  gt                      8 00AM                  lt  td gt                   lt td class  csstablelisttd  width  70px  gt                      0                  lt  td gt                   lt td class  csstablelisttd  gt                       lt span gt Name 1 lt  span gt                   lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          15                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          30                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          45                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  valign  top  width  90px  gt                          9 00AM                      lt  td gt                       lt td class  csstablelisttd  gt                          0                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          15                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          30                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          45                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  valign  top  width  90px  gt                          10 00AM                      lt  td gt                       lt td class  csstablelisttd  gt                          0                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          15                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          30                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          45                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  valign  top  width  90px  gt                          11 00AM                      lt  td gt                       lt td class  csstablelisttd  gt                          0                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          15                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          30                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          45                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  valign  top  width  90px  gt                          12 00PM                      lt  td gt                       lt td class  csstablelisttd  gt                          0                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          15                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          30                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          45                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  valign  top  width  90px  gt                          01 00PM                      lt  td gt                       lt td class  csstablelisttd  gt                          0                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          15                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          30                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          45                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  valign  top  width  90px  gt                          02 00PM                      lt  td gt                       lt td class  csstablelisttd  gt                          0                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          15                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          30                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          45                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  valign  top  width  90px  gt                          03 00PM                      lt  td gt                       lt td class  csstablelisttd  gt                          0                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          15                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          30                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          45                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  valign  top  width  90px  gt                          04 00PM                      lt  td gt                       lt td class  csstablelisttd  gt                          0                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          15                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          30                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          45                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  valign  top  width  90px  gt                          05 00PM                      lt  td gt                       lt td class  csstablelisttd  gt                          0                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          15                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          30                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          45                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  valign  top  width  90px  gt                          06 00PM                      lt  td gt                       lt td class  csstablelisttd  gt                          0                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          15                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          30                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          45                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  valign  top  width  90px  gt                          07 00PM                      lt  td gt                       lt td class  csstablelisttd  gt                          0                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          15                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          30                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  gt                       lt  td gt                       lt td class  csstablelisttd  gt                          45                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td class  csstablelisttd  valign  top  width  90px  gt                          08 00PM                      lt  td gt                       lt td class  csstablelisttd  gt                          0                      lt  td gt                       lt td class  csstablelisttd  gt                           lt span gt  lt  span gt                       lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt           lt  div gt    lt  body gt   lt  html gt

User · Answer

I fought with this one for a while  My goal was to have a table with headers where the widths of the each header column was the the same as the corresponding body column and was the minimum size necessary to fit the data  also the body data was scrollable underneath header   I solved this by using divs and not tables  Each  table  was a div with the header being a div of divs and the body being a div of divs  I used the style as indicated by  sushil above  I added a bit of javascript jQuery to balance the columns  Maybe 20-30 lines   Unfortunately I lost the code and have to rebuild it  I know this is a bit old  but maybe it will help someone else

[jquery] How to make html table vertically scrollable

Examples related to jquery

Examples related to html

Examples related to css