Html 表格溢出时的水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19794211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal scroll on overflow of table
提问by AnchovyLegend
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.
我在容器中有一个基本表。该表将有大约 25 列。我正在尝试在表格溢出时添加一个水平滚动条，但我真的很难过。
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
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
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/
JS小提琴（注意：如果可能，我希望水平滚动条位于带有红色边框的容器中）：http: //jsfiddle.net/ZXnqM/3/
回答by mayabelle
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/
回答by TreeTree
Unless I grossly misunderstood your question, move overflow-x:scrollfrom .search-tableto .search-table-outter.
除非我严重误解了您的问题，否则请overflow-x:scroll从.search-table到.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.
据我所知，您不能为表格本身提供滚动条。
回答by The.Bear
A solution that nobody mentioned is use white-space: nowrapfor the table and add overflow-xto the wrapper.
没有人提到的解决方案是white-space: nowrap用于表并添加overflow-x到包装器中。
(http://jsfiddle.net/xc7jLuyx/11/)
( http://jsfiddle.net/xc7jLuyx/11/)
CSS
CSS
.wrapper { overflow-x: auto; }
.wrapper table { white-space: nowrap }
HTML
HTML
<div class="wrapper">
<table></table>
</div>
This is an ideal scenario if you won't want rows with multiple lines.
To add break lines you need to use <br/>.
如果您不想要多行的行，这是一个理想的方案。
要添加中断线，您需要使用<br/>.
回答by surbhi bakshi
.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.
您应该在 div 中提供滚动。
回答by user2323922
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.
在移动设备的响应式网站上，整个内容必须绝对定位在相对 div 上。并固定高度。媒体查询集的相关性。
@media only screen and (max-width: 480px){
.scroll-wrapper{
position:absolute;
overflow-x:scroll;
}