我在容器中有一个基本表。该表将有大约 25 列。我正在尝试在表格溢出时添加一个水平滚动条,但我真的很难过。
现在发生的情况是,表格单元格通过自动调整单元格的高度并保持固定的表格宽度来容纳单元格内容。
对于为什么我的方法无法解决此问题的任何建议,我很感激。
提前谢谢了!
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(注意:如果可能的话,我希望水平滚动条在带有红色边框的容器中):http: //jsfiddle.net/ZXnqM/3/
原文由 AnchovyLegend 发布,翻译遵循 CC BY-SA 4.0 许可协议
我认为你的
overflow
应该在外容器上。您还可以明确设置列的最小宽度。像这样:小提琴:http: //jsfiddle.net/5WsEt/