表格溢出时水平滚动 [英] Horizontal scroll on overflow of table

问题描述

我在容器中有一个基本表。该表将包含约25列。我正在尝试在表格溢出时添加水平滚动条，现在过得很艰难。

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.

非常感谢！

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小提琴（注意：如果可能的话，我希望水平滚动条位于红色边框）：
http://jsfiddle.net/ZXnqM/3/

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

小提琴： http ：//jsfiddle.net/5WsEt/

这篇关于表格溢出时水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！