225

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 cannot get either scrollbar to appear.

2
  • 4
    ... thought about putting the whole table in a div? ... then add scroll to the div?
    – vector
    Apr 4, 2011 at 1:01
  • 5
    Maybe time to change which answer to be the accepted answer? Sep 9, 2017 at 19:05

20 Answers 20

435

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%;
}
17
  • 4
    This works for me in Chrome, but only after squashing everything together. white-space: nowrap; helps immediately see the scrollbar. Feb 17, 2016 at 13:13
  • 38
    I actually tried this before. The only issue was that the table cells no longer filled the full width of the table.
    – Shevy
    Jun 23, 2016 at 14:17
  • 6
    As said by others this doesn't work properly: table rows don't fill the table width.
    – collimarco
    Aug 10, 2017 at 10:58
  • 4
    @collimarco Note I had to use max-width: 100% for the inline-block option.
    – dogoncouch
    Feb 10, 2018 at 7:08
  • 3
    If you use <thead></thead> and the rule 'table tbody, table thead' columns and headers doesnt match. I didn't use the 'display:table' declaration and put column sizes in <th>'s (inside <thead>).
    – jlbofh
    Apr 26, 2021 at 19:08
99

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.

4
  • 16
    According to my own attempts and everything else I've read on the internet this simply won't work. You can overflow a wrapper element, sure, but not the table itself. Dec 22, 2014 at 15:03
  • 26
    @bloudermilk You can if you add display: block. Feb 17, 2016 at 13:29
  • 6
    Don't set display: block on tables - surprisingly it strips them of their semantics! This harms accessibility and makes life difficult for users of screen readers. See here developer.paciellogroup.com/blog/2018/03/… Feb 2, 2021 at 13:22
  • Wow...so I was struggling to display a table in mobile view as it was messing up my whole phone layout. Thank You @CeesTimmerman. It fixed my issue Jun 10, 2021 at 12:15
47

Wrap the table in a DIV, set with the following style:

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}
1
  • 11
    It seem that the overflow:auto here is unecessary. Do you know of anyway to achieve this without setting the width... that always seems to be the solution in html - hardcode some width or height but that seems to defeat the point of having a layout engine!
    – JonnyRaa
    Mar 17, 2015 at 15:13
39

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.

<style> 
 .table_wrapper{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
</style>

<div class="table_wrapper">
<table>
...
</table>
</div>
4
  • 2
    The white-space: nowrap; seems to be optional. Dec 3, 2018 at 9:03
  • Excellent! Styling the div wrapper instead of the table, solved the issue of the table not filling the whole page width when it has few columns. Oct 17, 2020 at 19:34
  • Seems there's no need for display: block;
    – BrunoElo
    Apr 11, 2021 at 23:34
  • @BrunoElo for some reason my table won't scroll without display: block Jan 19, 2022 at 6:07
25

Use the CSS attribute "overflow" for this.

Short summary:

overflow: visible|hidden|scroll|auto|initial|inherit;

e.g.

table {
    overflow: scroll;
}
2
  • link provided is broken Jul 1, 2014 at 21:03
  • To quote @WickyNillams from the comment further above: > Don't set display: block on tables - surprisingly it strips them of their semantics! This harms accessibility and makes life difficult for users of screen readers. See here tpgi.com/…
    – Sascha
    Jan 31, 2022 at 10:54
19

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.

6
  • 5
    Don't set display: block on tables - surprisingly it strips them of their semantics! This harms accessibility and makes life difficult for users of screen readers. See here developer.paciellogroup.com/blog/2018/03/… Feb 2, 2021 at 13:21
  • 1
    Yikes, did NOT know that! Thanks for the info, @WickyNilliams.
    – Mary7678
    Feb 3, 2021 at 3:48
  • 1
    It's very surprising behavior! Feb 3, 2021 at 11:36
  • 1
    table tbody styles you apply will make it so that table thead cols have mismatched widths with tbody cols.
    – trainoasis
    Mar 7, 2022 at 15:34
  • table tbody{...} styles don't get applied to my mat-table... Anyone have similar problems?
    – Baron
    May 17, 2022 at 21:21
12

I couldn't get any of the above solutions to work. However, I found a hack:

body {
  background-color: #ccc;
}

.container {
  width: 300px;
  background-color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.hack2 {
  display: table-cell;
  overflow-x: auto;
  width: 100%;
}
<div class="container">

  <div class="hack1">
    <div class="hack2">

      <table>
        <tr>
          <td>table or other arbitrary content</td>
          <td>that will cause your page to stretch</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
      </table>

    </div>
  </div>

</div>

3
  • None of the above worked for me either, but this did. Nice one, thanks.
    – Gábriel
    Dec 14, 2019 at 21:10
  • @Gábriel Glad it worked for you. I tried it again just now in Firefox and it doesn't seem to be rendering correctly :-( i.imgur.com/BcjSaCV.png Chrome still looks good.
    – mpen
    Dec 15, 2019 at 3:25
  • 1
    Strange; I was using it exactly on Firefox and it worked there - although not in this exact setup. I wanted to render a big grid made up of 10 x 10 px divs with collapsed borders and the maxed-out width + the overflow-x: auto seemed to be the key. With those in place, everything looked perfect. Also, I'm not using <table> at all, only divs, with display: table, table-row and table-cell.
    – Gábriel
    Dec 16, 2019 at 7:11
9

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;
}
2
5

Insert the table inside a div, so the table will take full length

HTML

<div class="scroll">
 <table>  </table>
</div>   

CSS

.scroll{
    overflow-x: auto;
    white-space: nowrap;
}
1
  • 2
    That worked for me. I usually avoid changing the HTML but in that case it's much easier
    – clem
    Jan 9, 2021 at 9:50
4
.wrapper {
  width: 0;
  min-width: 100%; //width 0, but min-width 100?? yes, I know...
  overflow: auto;
}
<div class="wrapper">
  <table></table>
</div>

table can have any width. I usually use 100% or max-content for the table.

1
  • This is the only solution here where an explicit width isn't required. Thank you!
    – Kevin Beal
    Nov 22 at 16:09
3

This is what worked for me

.wrapper {
  overflow-x: auto;
  white-space: nowrap;
}

.wrapper table {
  width: auto;
  min-width: 100%;
}

<div class="wrapper">
   <table>...</table>
</div>
3

Seems a bit overdone solutions. Cleanest is to just wrap it with a div like so:

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

https://www.w3schools.com/howto/howto_css_table_responsive.asp

1
  • yes, this is exactly i am using, i was going to add this solution :D Nov 29, 2022 at 18:03
2

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;
}
3
  • @Saeed Did you mean something like html structure?
    – George
    Aug 15, 2018 at 11:43
  • My bad, I mean add more explanation, to help understand it better
    – mastisa
    Aug 15, 2018 at 11:45
  • Hope this version is more clarified.
    – George
    Aug 15, 2018 at 12:09
2

The 'more than 100% width' on the table really made it work for me.

.table-wrap {
    width: 100%;
    overflow: auto;
}

table {
    table-layout: fixed;
    width: 200%;
}

2

With bootstrap

 <div class="table-responsive">
   <table class="table">
     ...
   </table>
 </div>
1

For what it's worth, the best answer I found was here: https://github.com/filamentgroup/tablesaw/issues/58#issuecomment-63966574

table.tablesaw
{
    table-layout: fixed;
    max-width: none;
    width: auto;
    min-width: 100%;
}
1

add tag table to div element with style="overflow-x:auto"

<div style="overflow-x:auto">
<table class="table table-bordered">
    <thead>
        <tr>
            <th><b>Name</b></th>
            <th><b>Username</b></th>
            <th><b>Email</b></th>
            <th><b>Avatar</b></th>
            <th><b>Status</b></th>
            <th><b>Action</b></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
0

I tried all the above solutions but had some issues with them.

If we add display: 'block' to the table, the cells do not occupy the full width. If we add it to the table wrapper, your custom table header like search, filter etc will also scroll which will look bad.

I was able to achieve the expected behaviour by adding overflow-x: auto to the body wrapper of the table.

Cells take full width even with less columns and a scroll bar appears automatically as needed.

0

Like already stated, using display:block; on table is bad. I tried most of the answers in this thread, none worked as I wanted. If your HTML is structured like this:

<div>
  <table>
    <tbody>

And you want the parent div to be horizontally scrollable, you can try the following:

.text-left {text-align:left;} /* Ignore */

.x-auto {
  overflow-x: auto;
}

.table {
  text-align: left;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}

.table tbody {
  display: table;
  width: 100%;
}
<div class="x-auto">
  <table class="table text-left">
    <tbody>
      <tr>
        <th>Head1</th>
        <th>Head2</th>
      </tr>
      <tr>
        <td>Some short text!</td>
        <td>Some really long text, like really really really really really really really really really really really really long!</td>
      </tr>
    </tbody>
  </table>
</div>

-2
//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>

//Css to make Horizontal Dropdown

<style>

    .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; }


</style>
1
  • Indentation and sample data would help if you intend to demo something. Also, did you mean "scrollbar" instead of "Dropdown"? Feb 17, 2016 at 13:24

Not the answer you're looking for? Browse other questions tagged or ask your own question.