表溢出的水平滚动

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

Answer 1

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

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

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

Answer 2

对于那些不能或不想将table包裹在div中的解决方案（例如，如果HTML是从Markdown生成的），但是仍然希望具有滚动条：

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>

说明：display: block;使滚动条成为可能。默认情况下（与表不同），块跨越父元素的整个宽度。可以使用max-width: fit-content;来防止这种情况，它允许您使用margin: 0 auto;来水平放置较少内容的表格。 white-space: nowrap;是可选的（但对于本演示很有用）。

Answer 3

除非我严重误解了您的问题，否则请将overflow-x:scroll从.search-table移至.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;   }

据我所知，你不能自己给表格滚动条。

Answer 4

没有人提到的解决方案是对表使用white-space: nowrap并将overflow-x添加到包装器中。

（http://jsfiddle.net/xc7jLuyx/11/）

<强> CSS

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

<强> HTML

<div class="wrapper">
    <table></table>
</div>

如果您不希望行包含多行，这是一个理想的方案。要添加行，您需要使用<br/> 。

Answer 5

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

你应该在div中提供滚动。

Answer 6

在移动设备的响应式网站上，整个事情必须在相对div上进行绝对定位。并固定高度。媒体查询设置相关性。

<cfquery name="q1" datasource="test">
 select * from table1
</cfquery>