Horizontal scroll on overflow of table

Question

I have a basic table in a container. The table will have about 25 columns. I am trying to add a horizontal scroll bar on overflow of the table and am having a really tough time.

What is happening now, is the table cells are accommodating the cells contents by automatically adjusting the height of the cell and maintaining a fixed table width.

I appreciate any suggestions on why my method is not working on how to fix this.

CSS

.search-table-outter {margin-bottom:30px; }
.search-table{table-layout: fixed; margin:40px auto 0px auto;  overflow-x:scroll; }
.search-table, td, th{border-collapse:collapse; border:1px solid #777;}
th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
td{padding:5px 10px; height:35px;}
tr:nth-child(even)  {background: #f5f5f5;}
tr:nth-child(odd)   {background: #FFF;}

HTML

<div class="search-table-outter wrapper">
    <table class="search-table inner">
        <tr>
            <th>Col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
            <th>col5</th>
            <th>col5</th>
        </tr>
        <?php echo $rows; ?>
    </table>
</div>

JS fiddle (Note: if possible, I would like the horizontal scroll bar to be in the container with the red border): http://jsfiddle.net/ZXnqM/3/

If you use [the right CSS](https://stackoverflow.com/a/62451601/12917821), you can get rid of the wrapper. — Kaspar Etter, Jun 18 '20 at 14:00

score 149 · Accepted Answer · edited Jun 14 '21 at 13:28

149

I think your overflow should be on the outer container. You can also explicitly set a min width for the columns. Like this:

.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }

Fiddle: http://jsfiddle.net/5WsEt/

edited Jun 14 '21 at 13:28

Roy

7,811
4
24
47

answered Nov 05 '13 at 16:50

mayabelle

9,804
9
36
59

score 101 · Answer 2 · answered Jun 18 '20 at 13:53

101

The solution for those who cannot or do not want to wrap the `table` in a `div` (e.g. if the HTML is generated from Markdown) but still want to have scrollbars:

table {
  display: block;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}

<table>
  <tr>
    <td>Especially on mobile, a table can easily become wider than the viewport.</td>
    <td>Using the right CSS, you can get scrollbars on the table without wrapping it.</td>
  </tr>
</table>

<table>
  <tr>
    <td>A centered table.</td>
  </tr>
</table>

Explanation: display: block; makes it possible to have scrollbars. By default (and unlike tables), blocks span the full width of the parent element. This can be prevented with max-width: fit-content;, which allows you to still horizontally center tables with less content using margin: 0 auto;. white-space: nowrap; is optional (but useful for this demonstration).

answered Jun 18 '20 at 13:53

Kaspar Etter

3,155
1
14
21

2

This really work perfect for markdown without using table wrapper like other answers. – John Siu Jul 23 '20 at 23:30
This worked straight away for table added via WYSIWYG editor, where there was no wrapper, and adding one would have been a mountain of work. Thanks @Kaspar Etter – rodders Jul 29 '20 at 16:05
1

Thanks. All this time. I was missing `display:block;` – Upulie Han Oct 11 '20 at 13:09
4

Note that this solution is not good for accessibility ([explanation](https://www.tpgi.com/short-note-on-what-css-display-properties-do-to-table-semantics/)) – clhenrick Aug 23 '21 at 18:23
4

Keep in mind that changing display from `table` to `block` might affect the table's children. For example, I ran into problem that children don't occupy full container's width. – Eugene Karataev Nov 24 '21 at 10:47
In Chrome, when you change `table` to `display:block;`, Chrome ignores the `` element, treating it instead as ``. Any CSS that targets `` will no longer work! – Martin_W Jan 11 '22 at 02:55
Can you provide an example, @Martin_W? I have no problems styling `` elements with the above CSS. – Kaspar Etter Jan 11 '22 at 08:53
Ah, @KasparEtter, you are right... I stand corrected. I had a typo in my HTML markup! `` styling via CSS fine. – Martin_W Jan 11 '22 at 23:27
@clhenrick Is that still accurate? I'm unable to reproduce the issue when setting display: block on a table. It still shows up as a table in the accessibility pane in Chrome 98, and its children still retain their roles. – Aleksandr Hovhannisyan Feb 23 '22 at 20:41
In the days of flex and grid its nice to see a good old fashion solution.I used to slap the table in a wrapper with overflow but this is so much more appealing! – Avi E. Koenig May 11 '22 at 14:14

The.Bear · Answer 3 · 2022-01-18T20:22:35.613

21

A solution that nobody mentioned is use white-space: nowrap for the table and add overflow-x to the wrapper.

(http://jsfiddle.net/xc7jLuyx/11/)

CSS

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

HTML

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

This is an ideal scenario if you don't want rows with multiple lines.
To add break lines you need to use <br/>.

edited Jan 18 '22 at 20:22

answered Feb 22 '18 at 14:57

The.Bear

5,621
2
27
33

I didn't have to use `white-space: nowrap`, but I was trying to use `overflow-x: scroll` on the table itself. Your suggestion to make a container for the table and use it there saved me. TY – s3c Dec 18 '19 at 14:37

score 7 · Answer 4 · answered Nov 05 '13 at 16:49

7

Unless I grossly misunderstood your question, move overflow-x:scroll from .search-table to .search-table-outter.

http://jsfiddle.net/ZXnqM/4/

.search-table-outter {border:2px solid red; overflow-x:scroll;}
.search-table{table-layout: fixed; margin:40px auto 0px auto;   }

As far as I know you can't give scrollbars to tables themselves.

answered Nov 05 '13 at 16:49

TreeTree

3,200
3
27
39

1

Thanks for the reply. Close, but not exactly, because the height of the cells (``) are still automatically adjusted, note even if `max-height:35px;` cells are way taller than 35px... – AnchovyLegend Nov 05 '13 at 16:51

score 0 · Answer 5 · answered Nov 13 '16 at 08:57

   .search-table-outter {border:2px solid red; overflow-x:scroll;}
   .search-table{table-layout: fixed; margin:40px auto 0px auto;   }
   .search-table, td, th{border-collapse:collapse; border:1px solid #777;}
   th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
   td{padding:5px 10px; height:35px;}

You should provide scroll in div.

score -4 · Answer 6 · answered Feb 24 '16 at 14:02

On a responsive site for mobiles the whole thing has to be positioned absolute on a relative div. And fixed height. Media Query set for relevance.

@media only screen and (max-width: 480px){
  .scroll-wrapper{
    position:absolute;
    overflow-x:scroll;
  }

Horizontal scroll on overflow of table

6 Answers6

The solution for those who cannot or do not want to wrap the `table` in a `div` (e.g. if the HTML is generated from Markdown) but still want to have scrollbars:

Linked

Horizontal scroll on overflow of table

6 Answers6

The solution for those who cannot or do not want to wrap the table in a div (e.g. if the HTML is generated from Markdown) but still want to have scrollbars:

Linked

The solution for those who cannot or do not want to wrap the `table` in a `div` (e.g. if the HTML is generated from Markdown) but still want to have scrollbars: