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!
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/
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/
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.
.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;}
你应该在div中提供滚动。
链接地址: http://www.djcxy.com/p/94528.html上一篇: 响应式“表格”
下一篇: 水平滚动表上的溢出