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.

Many thanks in advance!

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/

Answer 1

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/

Answer 2

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