表溢出时的水平滚动

Question

我在一个容器里有一张基本的桌子。该表将有大约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/

Answer 1

null

table {
  display: block;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}

html prettyprint-override"><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>

Answer 2

我想你的溢出应该在外容器上。还可以显式设置列的最小宽度。像这样：

.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }

小提琴:http://jsfidle.net/5wset/