How to add a scrollbar to an HTML5 table

Question

I have an table in HTML5 that I would like to add a scrollbar to  I want the table to show ten rows and then the user can scroll down to see other songs  How can I add the scrollbar   Here is my code for the table in HTML5    lt table id  my table  table border  5  gt     lt tr gt       lt th gt URL lt  th gt     lt  tr gt     lt tr gt       lt td gt http   www youtube com embed evuSpI2Genw lt  td gt     lt  tr gt     lt tr gt       lt td gt http   www youtube com embed evuSpI2Genw lt  td gt     lt  tr gt   lt  table gt    Here is my CSS code    my table       border-radius  20px      background-color  transparent      color  black      width  500px      text-align  center

User · Answer

This is technique I have used on a number of occasions. It is originally based on this fiddle with a number of modifications. It is also fluid and column widths can be fixed by adding a width style to the <th>.

_x000D_

/* this is for the main container of the table, also sets the height of the fixed header row */_x000D_
.headercontainer {_x000D_
  position: relative;_x000D_
  border: 1px solid #222;_x000D_
  padding-top: 37px;_x000D_
  background: #000;_x000D_
}_x000D_
/* this is for the data area that is scrollable */_x000D_
.tablecontainer {_x000D_
  overflow-y: auto;_x000D_
  height: 200px;_x000D_
  background: #fff;_x000D_
}_x000D_
_x000D_
/* remove default cell borders and ensures table width 100% of its container*/_x000D_
.tablecontainer table {_x000D_
  border-spacing: 0;_x000D_
  width:100%;_x000D_
}_x000D_
_x000D_
/* add a thin border to the left of cells, but not the first */_x000D_
.tablecontainer td + td {_x000D_
  border-left:1px solid #eee; _x000D_
}_x000D_
_x000D_
/* cell padding and bottom border */_x000D_
.tablecontainer td, th {_x000D_
  border-bottom:1px solid #eee;_x000D_
  padding: 10px;_x000D_
}_x000D_
_x000D_
/* make the default header height 0 and make text invisible */_x000D_
.tablecontainer th {_x000D_
    height: 0px;_x000D_
    padding-top: 0;_x000D_
    padding-bottom: 0;_x000D_
    line-height: 0;_x000D_
    visibility: hidden;_x000D_
    white-space: nowrap;_x000D_
}_x000D_
_x000D_
/* reposition the divs in the header cells and place in the blank area of the headercontainer */_x000D_
.tablecontainer th div{_x000D_
  visibility: visible;_x000D_
  position: absolute;_x000D_
  background: #000;_x000D_
  color: #fff;_x000D_
  padding: 9px 10px;_x000D_
  top: 0;_x000D_
  margin-left: -10px;_x000D_
  line-height: normal;_x000D_
   border-left: 1px solid #222;_x000D_
}_x000D_
/* prevent the left border from above appearing in first div header */_x000D_
th:first-child div{_x000D_
  border: none;_x000D_
}_x000D_
_x000D_
/* alternate colors for rows */_x000D_
.tablecontainer tbody  tr:nth-child(even){_x000D_
     background-color: #ddd;_x000D_
}

_x000D_

<div class="headercontainer">_x000D_
  <div class="tablecontainer">_x000D_
    <table>_x000D_
      <thead>_x000D_
        <tr>_x000D_
          <th>_x000D_
              Table attribute name_x000D_
            <div>Table attribute name</div>_x000D_
          </th>_x000D_
          <th>_x000D_
            Value_x000D_
            <div>Value</div>_x000D_
          </th>_x000D_
          <th>_x000D_
            Description_x000D_
            <div>Description</div>_x000D_
          </th>_x000D_
        </tr>_x000D_
      </thead>_x000D_
      <tbody>_x000D_
        <tr>_x000D_
          <td>align</td>_x000D_
          <td>left, center, right</td>_x000D_
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td>bgcolor</td>_x000D_
          <td>rgb(x,x,x), #xxxxxx, colorname</td>_x000D_
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td>border</td>_x000D_
          <td>1,""</td>_x000D_
          <td>Specifies whether the table cells should have borders or not</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td>cellpadding</td>_x000D_
          <td>pixels</td>_x000D_
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td>cellspacing</td>_x000D_
          <td>pixels</td>_x000D_
          <td>Not supported in HTML5. Specifies the space between cells</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td>frame</td>_x000D_
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>_x000D_
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td>rules</td>_x000D_
          <td>none, groups, rows, cols, all</td>_x000D_
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td>summary</td>_x000D_
          <td>text</td>_x000D_
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td>width</td>_x000D_
          <td>pixels, %</td>_x000D_
          <td>Not supported in HTML5. Specifies the width of a table</td>_x000D_
        </tr>_x000D_
      </tbody>_x000D_
    </table>_x000D_
  </div>_x000D_
</div>

_x000D_

Also as a JSFiddle

User · Answer

If you have heading to your table columns and you don t want to scroll those headings then this solution could help you   This solution needs thead and tbody tags inside table element   table tableSection       display  table      width  100     table tableSection thead  table tableSection tbody       float  left      width  100     table tableSection tbody       overflow  auto      height  150px    table tableSection tr       width  100       display  table      text-align  left    table tableSection th  table tableSection td       width  33       Working fiddle  With comments  Note  If you are sure that the vertical scrollbar is always present  then you can use css3 calc property to make the thead cells align with the tbody cells   table tableSection thead       padding-right 18px       18px is approx  value of width of scroll bar        width  calc 100  - 18px       You can do the same by detecting presence of scrollbar using javascript and applying the above styles

User · Answer

lt  DOCTYPE html gt       lt html gt       lt head gt       lt meta http-equiv  Content-Type  content  text html  charset ISO-8859-1  gt       lt title gt Scrollable Table lt  title gt       lt style type  text css  gt            padding  0  margin  0          table my table            font-family  verdana  arial  helvetica  sans-serif          font-size  11px          cellspacing  0           border-collapse  collapse           width  283px                      table my table th  table my table td            border-bottom  1px solid  999           border-right  1px solid  999                   table my table th   background   ffb          table my table td   background   ffe           div scrollableContainer            height  100px           overflow  auto            width  300px           margin  40px              border  1px solid  999          background   ffb                       lt  style gt       lt  head gt       lt body gt       lt div class  scrollableContainer  gt           lt table class  my table scrollable  gt             lt thead gt               lt tr gt                 lt th gt URL lt  th gt                   lt  tr gt           lt  thead gt            lt tbody gt                   lt tr gt                 lt td gt http   www youtube com embed evuSpI2Genw lt  td gt                        lt  tr gt                        lt tr gt                 lt td gt http   www youtube com embed evuSpI2Genw lt  td gt                                          lt  tr gt                        lt tr gt                 lt td gt http   www youtube com embed evuSpI2Genw lt  td gt                        lt  tr gt                        lt tr gt                 lt td gt http   www youtube com embed evuSpI2Genw lt  td gt                                          lt  tr gt                        lt tr gt                 lt td gt http   www youtube com embed evuSpI2Genw lt  td gt                        lt  tr gt                        lt tr gt                 lt td gt http   www youtube com embed evuSpI2Genw lt  td gt                                          lt  tr gt                        lt tr gt                 lt td gt http   www youtube com embed evuSpI2Genw lt  td gt                        lt  tr gt                        lt tr gt                 lt td gt http   www youtube com embed evuSpI2Genw lt  td gt                                          lt  tr gt               lt  tbody gt             lt  table gt           lt  div gt         lt  body gt       lt  html gt

User · Answer

use this table into a DIV    lt div class  tbl container  gt   lt table gt        lt  table gt   lt  div gt     tbl container  overflow auto  width  500px height  200px      and beside this if you want to make it more beautiful and attractive use the jscollpane to customized your scrollbar

User · Answer

HTML         lt h1 gt  amp darr  SCROLL  amp darr  lt  h1 gt   lt table class  blue  gt     lt thead gt       lt tr gt         lt th gt Colonne 1 lt  th gt         lt th gt Colonne 2 lt  th gt         lt th gt Colonne 3 lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt          lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    lt h1 class  scrollMore  gt  amp darr  SCROLL MORE  amp darr  lt  h1 gt   lt table class  purple  gt     lt thead gt       lt tr gt         lt th gt Colonne 1 lt  th gt         lt th gt Colonne 2 lt  th gt         lt th gt Colonne 3 lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt          lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt       lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt          lt tr gt         lt td gt Non lt  td gt         lt td gt Mais lt  td gt         lt td gt Allo   lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt   lt h1 class  up scrollMore  gt  amp uarr  UP  amp uarr  lt  h1 gt    CSS   body    font 1 2em normal Arial sans-serif    color  34495E     h1    text-align center    text-transform uppercase    letter-spacing -2px    font-size 2 5em    margin 20px 0      container    width 90     margin auto     table    border-collapse collapse    width 100       blue    border 2px solid  1ABC9C      blue thead    background  1ABC9C      purple    border 2px solid  9B59B6      purple thead    background  9B59B6     thead    color white     th td    text-align center    padding 5px 0     tbody tr nth-child even     background  ECF0F1     tbody tr hover  background  BDC3C7    color  FFFFFF      fixed    top 0    position fixed    width auto    display none    border none      scrollMore    margin-top 600px      up    cursor pointer      JS  jQuery      function           fn fixMe   function           return this each function              var  this     this                t fixed           function init                  this wrap   lt div class  container    gt                  t fixed    this clone                 t fixed find  tbody   remove   end   addClass  fixed   insertBefore  this               resizeFixed                        function resizeFixed                  t fixed find  th   each function index                     this  css  width   this find  th   eq index  outerWidth    px                                        function scrollFixed                 var offset     this  scrollTop                tableOffsetTop    this offset   top              tableOffsetBottom   tableOffsetTop    this height   -  this find  thead   height                if offset  lt  tableOffsetTop    offset  gt  tableOffsetBottom                  t fixed hide                else if offset  gt   tableOffsetTop  amp  amp  offset  lt   tableOffsetBottom  amp  amp   t fixed is   hidden                    t fixed show                          window  resize resizeFixed              window  scroll scrollFixed            init                       jQuery      document  ready function          table   fixMe           up   click function              html  body   animate         scrollTop  0       2000              For beginner programmer   If you don t want to download and host jQuery yourself  you can include it from a CDN  Content Delivery Network     lt head gt   lt script src  http   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt   lt  head gt     Adding jQuery to Your Web Pages click here   Reference  HERE

User · Answer

Instead of assuming as fixed width columns   CSS  table tableSection     display  table    width  100      table tableSection thead  table tableSection tbody     width  100      table tableSection thead     overflow-y  scroll    display  table    table-layout  fixed    width  calc 100  - 16px      assuming scrollbar width as 16px       table tableSection tbody     overflow  auto    height  150px    display  block     table tableSection tr     width  100     text-align  left    display  table    table-layout  fixed      Working Fiddle

User · Answer

you can try this   CSS              table-wrapper                   height 150px                  overflow auto                    margin-top 20px                                 table-wrapper table                    width 100                    color  000                                    table-wrapper table thead th  text                     position fixed                       top 0px                      height 20px                    width 35                     border 1px solid red                     HTML    lt div id  table-wrapper  gt        lt table gt           lt thead gt               lt tr gt                   lt th gt  lt span class  text  gt album lt  span gt  lt  th gt                   lt th gt  lt span class  text  gt song lt  span gt  lt  th gt                   lt th gt  lt span class  text  gt genre lt  span gt  lt  th gt               lt  tr gt           lt  thead gt           lt tbody gt   lt tr gt   lt td gt  album 0 lt  td gt   lt td gt  song0 lt  td gt   lt td gt  genre0 lt  td gt   lt  tr gt   lt tr gt   lt td gt album 1 lt  td gt   lt td gt song 1 lt  td gt   lt td gt  genre1 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album2 lt  td gt   lt td gt song 2 lt  td gt   lt td gt  genre2 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album3 lt  td gt   lt td gt song 3 lt  td gt   lt td gt  genre3 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album4 lt  td gt   lt td gt song 4 lt  td gt   lt td gt genre 4 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album5 lt  td gt   lt td gt song 5 lt  td gt   lt td gt genre 5 lt  td gt   lt  tr gt   lt tr gt   lt td gt album 6 lt  td gt   lt td gt  song6 lt  td gt   lt td gt  genre6 lt  td gt   lt  tr gt   lt tr gt   lt td gt album 7 lt  td gt   lt td gt  song7 lt  td gt   lt td gt  genre7 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album8 lt  td gt   lt td gt  song8 lt  td gt   lt td gt genre 8 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album9 lt  td gt   lt td gt  song9 lt  td gt   lt td gt  genre9 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album10 lt  td gt   lt td gt song 10 lt  td gt   lt td gt  genre10 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album11 lt  td gt   lt td gt song 11 lt  td gt   lt td gt  genre11 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album12 lt  td gt   lt td gt  song12 lt  td gt   lt td gt  genre12 lt  td gt   lt  tr gt   lt tr gt   lt td gt album 13 lt  td gt   lt td gt  song13 lt  td gt   lt td gt  genre13 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album14 lt  td gt   lt td gt  song14 lt  td gt   lt td gt  genre14 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album15 lt  td gt   lt td gt  song15 lt  td gt   lt td gt  genre15 lt  td gt   lt  tr gt   lt tr gt   lt td gt album 16 lt  td gt   lt td gt  song16 lt  td gt   lt td gt  genre16 lt  td gt   lt  tr gt   lt tr gt   lt td gt album 17 lt  td gt   lt td gt  song17 lt  td gt   lt td gt  genre17 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album18 lt  td gt   lt td gt  song18 lt  td gt   lt td gt  genre18 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album19 lt  td gt   lt td gt  song19 lt  td gt   lt td gt  genre19 lt  td gt   lt  tr gt   lt tr gt   lt td gt  album20 lt  td gt   lt td gt  song20 lt  td gt   lt td gt  genre20 lt  td gt   lt  tr gt               lt  tbody gt       lt  table gt     lt  div gt    Check this fiddle   http   jsfiddle net Kritika GLKxB 1   this will keep the table head fixed  and scroll only the table content

User · Answer

This was a challenging question  I think I finally have a solution that satisfies complete requirements  a vertical and horizontal scrollable dynamic table  dynamic because you can change the amount of rows and columns  and no cells have fixed width or height    The HTML and CSS layout is quite simple as other people have mentioned  The key issue is recalculating  JavaScript  cell widths  And to make sure horizontal scrolling works  I also recalculate theader and tbody width   Here s a fiddle https   jsfiddle net jmarcos00 6hv0dsj8 1   HTML code    lt  -- thead and tbody have identifiers table is inside a div container -- gt   lt div gt     lt table gt       lt thead id  mythead  gt         lt tr gt           lt th gt header one lt  th gt           lt th gt two lt  th gt           lt th gt header three lt  th gt           lt th gt header one lt  th gt           lt th gt two lt  th gt           lt th gt header three lt  th gt         lt  tr gt       lt  thead gt       lt tbody id  mytbody  gt         lt tr gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt         lt  tr gt         lt tr gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt         lt  tr gt         lt tr gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt         lt  tr gt         lt tr gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt         lt  tr gt         lt tr gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt         lt  tr gt         lt tr gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt         lt  tr gt         lt tr gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt         lt  tr gt         lt tr gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt         lt  tr gt         lt tr gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt         lt  tr gt         lt tr gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt           lt td gt one lt  td gt           lt td gt data two lt  td gt           lt td gt three lt  td gt         lt  tr gt       lt  tbody gt     lt  table gt   lt  div gt    CSS code      table border rule    table  td  th   border  1px solid black        display as block plus display vertical scroll bars    thead  tbody   display  block  overflow-y  scroll        sample height    tbody   height  100px        sample width and horizontal scroll bar    div   width  200px  overflow-x  auto      JavaScript code   var i  w  wtot  thtot  thw  tdw  theadtr  tbodytr  var th rect  td rect  theadtr rect  tbodytr rect  var safe   new Array        get thead and tbody var mythead   document getElementById  mythead    var mytbody   document getElementById  mytbody        get first tr of thead and tbody theadtr   mythead children 0   tbodytr   mytbody children 0   theadtr rect   theadtr getBoundingClientRect    tbodytr rect   tbodytr getBoundingClientRect        get width difference of longer first tr      difference between tr and parent if  tbodytr rect width  gt  theadtr rect width      wtot   mytbody getBoundingClientRect   width - tbodytr rect width  else     wtot   mythead getBoundingClientRect   width - theadtr rect width      get width difference between tr and total th width  first step  thtot   theadtr rect width      get th thead array and td tbody array theadtr   theadtr children  tbodytr   tbodytr children      get loop for  i   0  i  lt  theadtr length  i             second step for width difference between tr and total th width     th rect   theadtr i  getBoundingClientRect        td rect   tbodytr i  getBoundingClientRect        thtot -  th rect width          get width of each th and first row td  without paddings etc      tdw   parseFloat window getComputedStyle tbodytr i   getPropertyValue  width         thw   parseFloat window getComputedStyle theadtr i   getPropertyValue  width             get bigger width     w    tdw  gt  thw    tdw   thw      safe push w           add to width total  decimal value with paddings etc      w    tdw  gt  thw    td rect width   th rect width      wtot    w        consider tr width and total th width difference wtot    thtot      set loop for  i   0  i  lt  theadtr length  i             set width to th and first row td     w   safe i     px       theadtr i  style width   w      tbodytr i  style width   w         set width for thead and tbody wtot   wtot    px   mythead style width   wtot  mytbody style width   wtot

User · Answer

Using flexboxes  no javascript  and it is responsive    x000D   x000D     styles    x000D   x000D  table   x000D    font-family  sans-serif  x000D    border-collapse  collapse  x000D    max-height  300px  x000D    overflow  auto  x000D    x000D   x000D  td  x000D  th   x000D    border  1px solid  ddd  x000D    text-align  left  x000D    padding  8px  x000D    background   fff  x000D    x000D   x000D  tr nth-child odd  td   x000D    background-color   eee  x000D    x000D   x000D     fixed headers    x000D   x000D  table  x000D  thead  x000D  tbody   x000D    display  block  x000D    x000D   x000D  thead   x000D    position  sticky  x000D    top  0  x000D    x000D   x000D  tr   x000D    display  flex  x000D    x000D   x000D  th  x000D  td   x000D    flex  1  x000D    min-width  100px  x000D    overflow  hidden  x000D    text-overflow  ellipsis  x000D    x000D   lt h2 gt HTML Table lt  h2 gt  x000D   lt div class wrap gt  x000D     lt table gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th gt   lt  th gt  x000D           lt th gt Firstname lt  th gt  x000D           lt th gt Lastname lt  th gt  x000D           lt th gt Age lt  th gt  x000D           lt th gt City lt  th gt  x000D           lt th gt Country lt  th gt  x000D           lt th gt Sex lt  th gt  x000D           lt th gt Example lt  th gt  x000D           lt th gt Example lt  th gt  x000D           lt th gt ExampleReallyReallyLong lt  th gt  x000D           lt th gt Example 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 Anna lt  td gt  x000D           lt td gt Pitt lt  td gt  x000D           lt td gt 35 lt  td gt  x000D           lt td gt New York lt  td gt  x000D           lt td gt USA lt  td gt  x000D           lt td gt Female lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 1 lt  td gt  x000D           lt td gt Anna lt  td gt  x000D           lt td gt Pitt lt  td gt  x000D           lt td gt 35 lt  td gt  x000D           lt td gt New York lt  td gt  x000D           lt td gt USA lt  td gt  x000D           lt td gt Female lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Example Really Really Long lt  td gt  x000D           lt td gt ExampleReallyReallyLong lt  td gt  x000D           lt td gt Yes lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 1 lt  td gt  x000D           lt td gt Anna lt  td gt  x000D           lt td gt Pitt lt  td gt  x000D           lt td gt 35 lt  td gt  x000D           lt td gt New York lt  td gt  x000D           lt td gt USA lt  td gt  x000D           lt td gt Female lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 1 lt  td gt  x000D           lt td gt Anna lt  td gt  x000D           lt td gt Pitt lt  td gt  x000D           lt td gt 35 lt  td gt  x000D           lt td gt New York lt  td gt  x000D           lt td gt USA lt  td gt  x000D           lt td gt Female lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 1 lt  td gt  x000D           lt td gt Anna lt  td gt  x000D           lt td gt Pitt lt  td gt  x000D           lt td gt 35 lt  td gt  x000D           lt td gt New York lt  td gt  x000D           lt td gt USA lt  td gt  x000D           lt td gt Female lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 1 lt  td gt  x000D           lt td gt Anna lt  td gt  x000D           lt td gt Pitt lt  td gt  x000D           lt td gt 35 lt  td gt  x000D           lt td gt New York lt  td gt  x000D           lt td gt USA lt  td gt  x000D           lt td gt Female lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 1 lt  td gt  x000D           lt td gt Anna lt  td gt  x000D           lt td gt Pitt lt  td gt  x000D           lt td gt 35 lt  td gt  x000D           lt td gt New York lt  td gt  x000D           lt td gt USA lt  td gt  x000D           lt td gt Female lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 1 lt  td gt  x000D           lt td gt Anna lt  td gt  x000D           lt td gt Pitt lt  td gt  x000D           lt td gt 35 lt  td gt  x000D           lt td gt New York lt  td gt  x000D           lt td gt USA lt  td gt  x000D           lt td gt Female lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 1 lt  td gt  x000D           lt td gt Anna lt  td gt  x000D           lt td gt Pitt lt  td gt  x000D           lt td gt 35 lt  td gt  x000D           lt td gt New York lt  td gt  x000D           lt td gt USA lt  td gt  x000D           lt td gt Female lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D           lt td gt Yes lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

jogesh pi answer is a good solution  i ve created a example here http   jsfiddle net pqgaS 5   check it  hope this help   lt div id  listtableWrapperScroll  gt       lt table id  listtable  gt           lt tr gt               lt td gt Data Data lt  td gt               lt td gt Data Data lt  td gt               lt td gt Data Data lt  td gt                           lt  tr gt       lt  table gt   lt  div gt    listtableWrapperScroll      height 100px      width 460px      overflow-y scroll      border 1px solid  777777      background  FFFFF2     listtableWrapperScroll  listtable      width 440px            listtableWrapperScroll  listtable tr td      border-bottom 1px dashed  444

User · Answer

A year or so has passed since the question was asked  but I wasn t satisfied with the answers  I fiddled for a while  and here is a code that    works in IE8  and all other browsers  is very easy to understand  lines up the cell borders perfectly  fixed-width cells   fixes the head while the body scrolls  automatically adapts to touch screens     Live demo here  http   jsbin com bagaro 1 edit html output     lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta charset  utf-8  gt       lt title gt Scrollabe table lt  title gt       lt  -- Substantially simplified and improved version of the table on     http   www cssbakery com 2010 12 css-scrolling-tables-with-fixed html -- gt       lt script gt          if   ontouchstart  in window     window DocumentTouch  amp  amp  document instanceof DocumentTouch                 document documentElement className      touchScreen                  lt  script gt       lt style gt             BASICS                     padding  0          margin  0          box-sizing  border-box     in case block elements are used inside table cells              html           font-size  62 5      standardizes older IEs              body           font  normal 1 3em Verdana       13px              table           border-collapse  collapse          table-layout  fixed          empty-cells  show            td           border  1px solid black          padding  4px                   SCROLL TABLE ESSENTIALS    SOME ADDITIONAL CSS          div scrollTableContainer           width  617px          margin  40px     just for presentation purposes            border  1px solid black             touchScreen div scrollTableContainer           width  600px     touch devices do not form scrollbars    17 px wide                tHeadContainer           background   CC3600          color  white          font-weight  bold             tBodyContainer           height  240px          overflow-y  scroll             touchScreen  tBodyContainer           -webkit-overflow-scrolling  touch     smooths scrolling on touch screens                     FINER LAYOUT MATTERS         tr first-child td           border-top  0             tBody tr lastRow td           border-bottom  0            td first-child           min-width  108px     Firefox needs min- and max-widths            max-width  108px          border-left  0            td first-child   td           min-width  125px          max-width  125px            td first-child   td   td           min-width  90px          max-width  90px            td first-child   td   td   td           min-width  95px          max-width  95px            td first-child   td   td   td   td           width  180px     here  Firefox messes up with only min- and max-widths            border-right  0                   AND SOME CSS TO INFORM TOUCH SCREEN USERS         p touchDeviceText           display  none             touchScreen p touchDeviceText           display  block             lt  style gt   lt  head gt   lt body gt       lt p id  touchDeviceText  gt This table is scrollable lt  p gt       lt div id  scrollTableContainer  gt           lt div id  tHeadContainer  gt               lt table id  tHead  gt                   lt tr gt                       lt td gt Name lt  td gt                       lt td gt Operator lt  td gt                       lt td gt Began operation lt  td gt                       lt td gt Tonnage lt  td gt                       lt td gt Status lt  td gt                   lt  tr gt               lt  table gt           lt  div gt  lt  -- tHeadContainer -- gt           lt div id  tBodyContainer  gt               lt table id  tBody  gt                   lt tr gt                       lt td gt Seabourne Sun lt  td gt                       lt td gt Seabourn Cruise Line lt  td gt                       lt td gt 1988 lt  td gt                       lt td gt   lt  td gt                       lt td gt Ended service in 2002  currently operating as Prinsendam lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt Adventures of the Seas lt  td gt                       lt td gt Royal Caribbean International lt  td gt                       lt td gt 2001 lt  td gt                       lt td gt 138 000 lt  td gt                       lt td gt Operating lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt Oceanic Independence lt  td gt                       lt td gt American Hawaiian Cruises   American Global Line lt  td gt                       lt td gt 1974 lt  td gt                       lt td gt 23 719 lt  td gt                       lt td gt Named formerly  1951-1974  and subsequently renamed  1982-2006  the Independence  renamed the Oceanic  2006   sold for scrap in 2008 but remains in mothballs lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt Cunard Ambassador lt  td gt                       lt td gt Cunard Line lt  td gt                       lt td gt 1972 lt  td gt                       lt td gt 14 160 lt  td gt                       lt td gt Burnt 1974  rebuilt into a livestock carrier  renamed Linda Clausen  later Procyon  Raslan  Scrapped 1984 after a second fire  lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt Aegean Beauty lt  td gt                       lt td gt Voyages to Antiquity lt  td gt                       lt td gt 1973 lt  td gt                       lt td gt 11 563 lt  td gt                       lt td gt Formerly Aegean Dolphin and Aegean I  Operating lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt Serenade of the Seas lt  td gt                       lt td gt Royal Caribbean International lt  td gt                       lt td gt 2003 lt  td gt                       lt td gt 90 090 lt  td gt                       lt td gt Operating lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt Queen Elizabeth 2 lt  td gt                       lt td gt Cunard Line lt  td gt                       lt td gt 1969 lt  td gt                       lt td gt 70 327 lt  td gt                       lt td gt Left fleet in November 2008 lt  td gt                   lt  tr gt                   lt tr gt                       lt td gt National Geographic Endeavour lt  td gt                       lt td gt Lindblad Expeditions lt  td gt                       lt td gt 1996 lt  td gt                       lt td gt  lt  td gt                       lt td gt Operating  also known as Endeavour lt  td gt                   lt  tr gt                   lt tr class  lastRow  gt                       lt td gt Liberty of the Seas lt  td gt                       lt td gt Royal Caribbean International lt  td gt                       lt td gt 2007 lt  td gt                       lt td gt 154 407 lt  td gt                       lt td gt Operating lt  td gt                   lt  tr gt               lt  table gt           lt  div gt  lt  -- tBodyContainer -- gt       lt  div gt  lt  -- scrollTableContainer -- gt   lt  body gt   lt  html gt

User · Answer

My simplest solution is based on fixed columns layout  You ll have to set the width of each column  for example  4 columns 100px each is equal to 400px total width   table     table-layout  fixed    width  400px    td  th     width  100px      The fixed table layout algorithm has many advantages over the automatic table layout algorithm  for example  the horizontal layout only depends on the table s width and the width of the columns  not the contents of the cells  allows a browser to lay out the table faster than the automatic table layout  the browser can begin to display the table once the first row has been received  etc    Then  you ll have to separate the thead from the tbody by forcing their display style to block rather than to the default table-   thead tr     display  block    tbody     display  block    height  256px    overflow-y  auto      That what will make the tbody scrollable as a separate box and the thead unrelated from it  And that s the main reason why you had to fix the column widths as done above   Working JsFiddle  https   jsfiddle net angiolep 65q1gdcy 1

User · Answer

You can use a division class with the overflow attribute using the value scroll  Or you can enclose the table inside an iframe  The iframe works well with old and new IE browsers  but it may not work with other browsers and probably not with the latest IE       myid   overflow-x  scroll  overflow-y  hide  width 200px     Or whatever the amount of pixels       myid   overflow-x  scroll  overflow-y  hide  width 200px     Or whatever the amount of pixels        lt div class  myid  gt        lt div class  row  gt Content1 lt  div gt        lt div class  row2  gt Content2 lt  div gt   lt  div gt    lt table id  myid  gt  lt tr gt  lt td gt Content lt  td gt  lt  tr gt  lt  table gt

User · Answer

I first tried the accepted answer by Mr Green  but I found my columns didn t align  that float left seems very suspicious   When I went from no scollbar to scrollbar -- my table body shifted a few pixels and I lost alignment   CODE PEN https   codepen io majorp pen gjrRMx  CSS   width50px       width  100px  important      width100px       width  100px  important       fixed headers       width  100       table-layout  fixed      border-collapse  collapse     th       padding  5px      text-align  left      font-weight bold      height 50px     td       padding  5px      text-align  left     thead  tr        display  block      position  relative      tbody       display  block      overflow  auto      width  100       height  500px      tableColumnHeader       height  50px      font-weight  bold         lime       background-color  lime

[css] How to add a scrollbar to an HTML5 table?

Examples related to css

Examples related to html