Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Horizontal scroll on overflow of table

Horizontal scroll on overflow of table


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!


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


Col1 col2 col3 col4 col5 col5

JS fiddle (Note: if possible, I would like the horizontal scroll bar to be in the container with the red border):

Problem courtesy of: AnchovyLegend


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


Solution courtesy of: mayabelle


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Horizontal scroll on overflow of table


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription