Add horizontal scrollbar to html table

Question

Is there a way to add a Horizontal scrollbar to an HTML table  I actually need it to be scrollable both vertically and horizontally depending on how the table grows but I can t get either scrollbar to appear

User · Answer

Insert the table inside a div  so the table will take full length HTML  lt div class  quot scroll quot  gt    lt table gt    lt  table gt   lt  div gt      CSS  scroll      overflow-x  auto      white-space  nowrap

User · Answer

With bootstrap   lt div class  quot table-responsive quot  gt      lt table class  quot table quot  gt               lt  table gt    lt  div gt

User · Answer

Representation of table  lt div class  search-table-outter  gt   lt table class  table table-responsive search-table inner  gt   lt  table gt   lt  div gt     Css to make Horizontal Dropdown   lt style gt        search-table table-layout  auto  margin 40px auto 0px auto         search-table  td  th           border-collapse  collapse        th padding 20px 7px  font-size 15px  color  444   td padding 5px 10px  height 35px        search-table-outter   overflow-x  scroll    th  td   min-width  200px       lt  style gt

User · Answer

The  more than 100  width  on the table really made it work for me    x000D   x000D   table-wrap   x000D      width  100   x000D      overflow  auto  x000D    x000D   x000D  table   x000D      table-layout  fixed  x000D      width  200   x000D    x000D   x000D   x000D

User · Answer

Edit    WickyNilliams has noted that setting display  block on a table body will strip the table of semantics and thus is not a good solution due to accessibility issues  I had good success with the solution proposed by  Serge Stroobandt  but I encountered the problem  Shevy had with the cells then not filling the full width of the table   I was able to fix this by adding some styles to the tbody  table     display  block    overflow-x  auto    white-space  nowrap     table tbody     display  table    width  100      This worked for me in Firefox  Chrome  and Safari on Mac

User · Answer

I figured out this answer based on previous solution and it s comment and added some adjustments of my own  This works for me on the responsive table   table     display  inline-block    overflow-x  auto    white-space  nowrap       make fixed table width effected by overflow-x   max-width  100        hide all borders that make rows not filled with the table width   border  0       add missing borders table td     border  1px solid

User · Answer

This is an improvement of Serge Stroobandt s answer and works perfectly  It solves the issue of the table not filling the whole page width if it has less columns    lt style gt     table wrapper      display  block      overflow-x  auto      white-space  nowrap     lt  style gt    lt div class  table wrapper  gt   lt table gt       lt  table gt   lt  div gt

User · Answer

First  make a display  block of your table then  set overflow-x  to auto  table       display  block      overflow-x  auto      white-space  nowrap     Nice and clean  No superfluous formatting  Here are more involved examples with scrolling table captions from a page on my website  If an issue is taken about cells not filling the entire table  append the following additional CSS code  table tbody       display  table      width  100

User · Answer

Wrap the table in a DIV  set with the following style   div wrapper     width  500px    height  500px    overflow  auto

User · Answer

Did you try CSS overflow property   overflow  scroll     Scrollbar are always visible    overflow  auto       Scrollbar is displayed as it s needed      UPDATE As other users are pointing out  this is not enough to add the scrollbars  So please  see and upvote comments and answers below

User · Answer

I was running into the same issue  I discovered the following solution  which has only been tested in Chrome v31   table       table-layout  fixed     tbody       display  block      overflow  scroll

User · Answer

Use the CSS attribute  overflow  for this   Short summary   overflow  visible hidden scroll auto initial inherit    e g   table       display  block      overflow  scroll

User · Answer

I couldn t get any of the above solutions to work  However  I found a hack    x000D   x000D  body   x000D    background-color   ccc  x000D    x000D   x000D   container   x000D    width  300px  x000D    background-color  white  x000D    x000D   x000D  table   x000D    width  100   x000D    border-collapse  collapse  x000D    x000D   x000D  td   x000D    border  1px solid black  x000D    x000D   x000D     try removing the  hack  below to see how the table overflows the  body    x000D   hack1   x000D    display  table  x000D    table-layout  fixed  x000D    width  100   x000D    x000D   x000D   hack2   x000D    display  table-cell  x000D    overflow-x  auto  x000D    width  100   x000D    x000D   lt div class  container  gt  x000D   x000D     lt div class  hack1  gt  x000D       lt div class  hack2  gt  x000D   x000D         lt table gt  x000D           lt tr gt  x000D             lt td gt table or other arbitrary content lt  td gt  x000D             lt td gt that will cause your page to stretch lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt uncontrollably lt  td gt  x000D             lt td gt xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx lt  td gt  x000D           lt  tr gt  x000D         lt  table gt  x000D   x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

[html] Add horizontal scrollbar to html table

Examples related to html

Examples related to css

Examples related to html-table

Examples related to scrollbar