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> <table> <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):
16 Answers
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:
1The 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).
A solution that nobody mentioned is use white-space: nowrap for the table and add overflow-x to the wrapper.
()
CSS
.wrapper { overflow-x: auto; }
.wrapper table { white-space: nowrap; }HTML
<div> <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/>.
Unless I grossly misunderstood your question, move overflow-x:scroll from .search-table to .search-table-outter.
.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.
1 .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.
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; }
