水平滚动表溢出

我有一个基本的表在一个容器。该表将有大约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;}

超文本标示语言

<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/

257259 次浏览
小开

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.

小开
最佳答案

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/

小开

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

小开 
   .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.

小开

A solution that nobody mentioned is use white-space: nowrap for the table and add overflow-x to the wrapper.

(http://jsfiddle.net/xc7jLuyx/11/)

CSS

.wrapper { overflow-x: auto; }
.wrapper table { white-space: nowrap; }

HTML

<div class="wrapper">
<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/>.

小开

The 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).


提交答案