Add a horizontal scrollbar to an 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 cannot get either scrollbar to appear.

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

Serge Stroobandt · Accepted Answer · 2021-02-10 00:08:23Z

463

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

edited Feb 10, 2021 at 0:08

answered May 24, 2015 at 13:13

Serge Stroobandt

32.1k9 gold badges122 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

Cees Timmerman Over a year ago

This works for me in Chrome, but only after squashing everything together. white-space: nowrap; helps immediately see the scrollbar.

Shevy Over a year ago

I actually tried this before. The only issue was that the table cells no longer filled the full width of the table.

collimarco Over a year ago

As said by others this doesn't work properly: table rows don't fill the table width.

dogoncouch Over a year ago

@collimarco Note I had to use max-width: 100% for the inline-block option.

jlbofh Over a year ago

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>).

|

pasine · Accepted Answer · 2016-02-22 23:45:38Z

102

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.

edited Feb 22, 2016 at 23:45

answered Apr 4, 2011 at 1:01

pasine

11.6k10 gold badges53 silver badges86 bronze badges

4 Comments

bloudermilk Over a year ago

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.

Cees Timmerman Over a year ago

@bloudermilk You can if you add display: block.

WickyNilliams Over a year ago

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/…

Shrish Sharma Over a year ago

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

Colin M · Accepted Answer · 2011-04-04 01:04:11Z

47

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

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}

answered Apr 4, 2011 at 1:04

Colin M

13.4k3 gold badges42 silver badges61 bronze badges

1 Comment

JonnyRaa Over a year ago

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!

ochomoswill · Accepted Answer · 2018-09-18 20:39:07Z

44

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>

answered Sep 18, 2018 at 20:39

ochomoswill

4314 silver badges4 bronze badges

4 Comments

Mike Shiyan Over a year ago

The white-space: nowrap; seems to be optional.

Leopoldo Sanczyk Over a year ago

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.

Emeka Elo Over a year ago

Seems there's no need for display: block;

sarfrazanwar Over a year ago

@BrunoElo for some reason my table won't scroll without display: block

Roger Willcocks · Accepted Answer · 2022-02-01 11:28:40Z

24

Use the CSS attribute "overflow" for this.

Short summary:

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

e.g.

table {
    overflow: scroll;
}

edited Feb 1, 2022 at 11:28

answered Apr 4, 2011 at 1:02

Roger Willcocks

1,66513 silver badges30 bronze badges

2 Comments

justingordon Over a year ago

link provided is broken

Sascha Over a year ago

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/…

Mary7678 · Accepted Answer · 2021-02-03 03:49:51Z

22

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.

edited Feb 3, 2021 at 3:49

answered Oct 18, 2018 at 20:35

Mary7678

4437 silver badges12 bronze badges

6 Comments

WickyNilliams Over a year ago

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/…

Mary7678 Over a year ago

Yikes, did NOT know that! Thanks for the info, @WickyNilliams.

WickyNilliams Over a year ago

It's very surprising behavior!

trainoasis Over a year ago

table tbody styles you apply will make it so that table thead cols have mismatched widths with tbody cols.

Luis Over a year ago

table tbody{...} styles don't get applied to my mat-table... Anyone have similar problems?

|

mpen · Accepted Answer · 2018-06-19 19:08:46Z

14

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>

edited Jun 19, 2018 at 19:08

answered Feb 11, 2018 at 21:41

mpen

285k289 gold badges896 silver badges1.3k bronze badges

4 Comments

Gábriel Over a year ago

None of the above worked for me either, but this did. Nice one, thanks.

mpen Over a year ago

@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.

Gábriel Over a year ago

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.

Joshy Francis Over a year ago

This worked for me too thanks. I tested in chrome so far no problem.

Dibyodyuti Mondal · Accepted Answer · 2022-07-23 15:02:54Z

11

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

answered Jul 23, 2022 at 15:02

Dibyodyuti Mondal

2013 silver badges4 bronze badges

2 Comments

Kevin Beal Over a year ago

This is the only solution here where an explicit width isn't required. Thank you!

Alisson Over a year ago

just logged in to say thank you

Josh · Accepted Answer · 2013-12-26 21:10:20Z

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

answered Dec 26, 2013 at 21:10

Josh

991 silver badge2 bronze badges

2 Comments

Cees Timmerman Over a year ago

table-layout: fixed is nice.

Luis Over a year ago

tbody {...} styles don't seem to get applied to my mat-table. Any idea why?

Mark Rotteveel · Accepted Answer · 2020-09-05 06:58:54Z

6

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

edited Sep 5, 2020 at 6:58

Mark Rotteveel

110k240 gold badges160 silver badges232 bronze badges

answered Sep 5, 2020 at 6:30

akash samanekar

611 silver badge2 bronze badges

1 Comment

clem Over a year ago

That worked for me. I usually avoid changing the HTML but in that case it's much easier

Jelle Hak · Accepted Answer · 2022-10-28 10:25:36Z

5

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

answered Oct 28, 2022 at 10:25

Jelle Hak

4995 silver badges6 bronze badges

1 Comment

greenridinghood Over a year ago

yes, this is exactly i am using, i was going to add this solution :D

Mugetsu · Accepted Answer · 2022-06-08 12:19:35Z

4

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>

answered Jun 8, 2022 at 12:19

Mugetsu

2,0903 gold badges27 silver badges49 bronze badges

Comments

George · Accepted Answer · 2018-08-15 12:15:14Z

3

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

edited Aug 15, 2018 at 12:15

answered Aug 15, 2018 at 11:24

George

1016 bronze badges

3 Comments

George Over a year ago

@Saeed Did you mean something like html structure?

mastisa Over a year ago

My bad, I mean add more explanation, to help understand it better

George Over a year ago

Hope this version is more clarified.

Peps · Accepted Answer · 2018-12-21 18:02:30Z

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

answered Dec 21, 2018 at 18:02

Peps

1841 silver badge14 bronze badges

Comments

Forrest · Accepted Answer · 2020-10-26 15:36:22Z

2

With bootstrap

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

answered Oct 26, 2020 at 15:36

Forrest

1572 silver badges17 bronze badges

Comments

aaron watts · Accepted Answer · 2025-08-03 09:20:14Z

2

Table that doesn't look weird and only scrolls horizontally when there isn't enough space allocated on screen for it's width:

table {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    width: max-content;
    max-width: 100%;
}

Add overflow-y and max-height for vertical size limit and scroll

edited Aug 3 at 9:20

answered Aug 3 at 9:12

aaron watts

312 bronze badges

1 Comment

nickbullock Nov 6 at 12:45

underrated solution, thanks

Khaled · Accepted Answer · 2021-10-05 23:06:40Z

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

answered Oct 5, 2021 at 23:06

Khaled

9271 gold badge8 silver badges18 bronze badges

Comments

Riki krismawan · Accepted Answer · 2022-02-25 07:50:57Z

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>

answered Feb 25, 2022 at 7:50

Riki krismawan

5871 gold badge5 silver badges12 bronze badges

Comments

George Chond · Accepted Answer · 2022-05-25 09:55:30Z

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>

sarfrazanwar · Accepted Answer · 2022-01-20 06:43:49Z

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.

answered Jan 20, 2022 at 6:43

sarfrazanwar

3832 gold badges5 silver badges19 bronze badges

Comments

EvilDr · Accepted Answer · 2024-02-13 18:54:33Z

-3

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>

edited Feb 13, 2024 at 18:54

EvilDr

9,71120 gold badges83 silver badges148 bronze badges

answered Feb 1, 2016 at 7:45

kinzzy goel

292 bronze badges

1 Comment

Cees Timmerman Over a year ago

Indentation and sample data would help if you intend to demo something. Also, did you mean "scrollbar" instead of "Dropdown"?

Collectives™ on Stack Overflow

Add a horizontal scrollbar to an HTML table

21 Answers 21

First, make a `display: block` of your table

18 Comments

4 Comments

1 Comment

4 Comments

2 Comments

6 Comments

4 Comments

2 Comments

2 Comments

1 Comment

1 Comment

Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

21 Answers 21

First, make a display: block of your table

18 Comments

4 Comments

1 Comment

4 Comments

2 Comments

6 Comments

4 Comments

2 Comments

2 Comments

1 Comment

1 Comment

Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Linked

Related

First, make a `display: block` of your table