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, you can get rid of the wrapper.

Kaspar Etter
– Kaspar Etter

2020-06-18 14:00:09 +00:00
Commented Jun 18, 2020 at 14:00 — Kaspar Etter
– Kaspar Etter, Commented Jun 18, 2020 at 14:00

Roy · Accepted Answer · 2021-06-14 13:28:18Z

159

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, 2021 at 13:28

Roy

8,1295 gold badges29 silver badges49 bronze badges

answered Nov 5, 2013 at 16:50

mayabelle

10.1k10 gold badges40 silver badges59 bronze badges

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

Comments

Kaspar Etter · Accepted Answer · 2020-06-18 13:53:19Z

113

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, 2020 at 13:53

Kaspar Etter

3,5981 gold badge18 silver badges23 bronze badges

11 Comments

John Siu Over a year ago

This really work perfect for markdown without using table wrapper like other answers.

tbs Over a year ago

Thanks. All this time. I was missing display:block;

clhenrick Over a year ago

Note that this solution is not good for accessibility (explanation)

Eugene Karataev Over a year ago

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.

Kaspar Etter Over a year ago

Can you provide an example, @Martin_W? I have no problems styling <thead> elements with the above CSS.

|

The.Bear · Accepted Answer · 2022-01-18 20:22:35Z

25

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, 2022 at 20:22

answered Feb 22, 2018 at 14:57

The.Bear

5,8952 gold badges31 silver badges34 bronze badges

1 Comment

s3c Over a year ago

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

TreeTree · Accepted Answer · 2013-11-05 16:49:15Z

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 5, 2013 at 16:49

TreeTree

3,2404 gold badges30 silver badges39 bronze badges

1 Comment

AnchovyLegend Over a year ago

Thanks for the reply. Close, but not exactly, because the height of the cells (<td>) are still automatically adjusted, note even if max-height:35px; cells are way taller than 35px...

surbhi bakshi · Accepted Answer · 2016-11-13 08:57:48Z

0

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

answered Nov 13, 2016 at 8:57

surbhi bakshi

1601 gold badge1 silver badge17 bronze badges

Comments

reh · Accepted Answer · 2024-10-05 07:31:41Z

    <div id="table-scroll" class="table-scroll">
      <table id="main-table" class="main-table">
        <thead>
          <tr>
            <th scope="col">Header 1</th>
            <th scope="col">Header 2</th>
            <th scope="col">Header 3 with longer content</th>
            <th scope="col">Header 4 text</th>
            <th scope="col">Header 5</th>
            <th scope="col">Header 6</th>
            <th scope="col">Header 7</th>
            <th scope="col">Header 8</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>First top Column</th>
            <td>Cell content<br>
              test </td>
            <td><a href="#">Cell content longer</a></td>
            <td>Cell content with more content and more content Cell </td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
          </tr>
     
        </tbody>
        <tfoot>
          <tr>
            <th>Footer 1</th>
            <td>Footer 2</td>
            <td>Footer 3</td>
            <td>Footer 4</td>
            <td>Footer 5</td>
            <td>Footer 6</td>
            <td>Footer 7</td>
            <td>Footer 8</td>
          </tr>
        </tfoot>
      </table>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.intro {
  max-width: 1280px;
  margin: 1em auto;
}
.table-scroll {
  position: relative;
  width: 100%;
  max-width: 800px;
  z-index: 1;
  margin: auto;
  overflow: auto;
  height: 350px;
  border: 1px solid #000;
}
.table-scroll table {
  width: 100%;
  min-width: 1200px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}
.table-wrap {
  position: relative;
}
.table-scroll th,
.table-scroll td {
  padding: 5px 10px;
  border: 1px solid #000;
  background: #fff;
  vertical-align: top;
}
.table-scroll thead th {
  background: #333;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
/* safari and ios need the tfoot itself to be position:sticky also */
.table-scroll tfoot,
.table-scroll tfoot th,
.table-scroll tfoot td {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #666;
  color: #fff;
  z-index: 4;
}

a:focus {
  background: red;
} /* testing links*/

th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ccc;
  width: 140px;
}
thead th:first-child,
tfoot th:first-child {
  z-index: 5;
}

td:nth-of-type(1){
  position: -webkit-sticky;
  position: sticky;
  left: 140px;
  z-index: 2;
  background: #aaa;
}


thead th:nth-of-type(2),
tfoot td:nth-of-type(1) {
  z-index: 5;
  left:140px;
}

    </div>

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
Please explain what you've changed to address the issue. Code-only answers are not good answers

user2323922 · Accepted Answer · 2016-02-24 14:02:29Z

-4

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

answered Feb 24, 2016 at 14:02

user2323922

951 silver badge3 bronze badges

Collectives™ on Stack Overflow

Horizontal scroll on overflow of table

7 Answers 7

Comments

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:

11 Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

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:

11 Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

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: