表格溢出时水平滚动

Posted 2023-04-13

【中文标题】表格溢出时水平滚动

【英文标题】：Horizontal scroll on overflow of table

【发布时间】：2013-11-16 15:14:44

【问题描述】：

我在容器中有一张基本表。该表将有大约 25 列。我正在尝试在表格溢出时添加一个水平滚动条，并且遇到了非常艰难的时期。

现在发生的情况是，表格单元格通过自动调整单元格的高度并保持固定的表格宽度来适应单元格内容。

感谢任何关于为什么我的方法无法解决此问题的建议。

非常感谢！

CSS

.search-table-outter margin-bottom:30px; 
.search-tabletable-layout: fixed; margin:40px auto 0px auto;  overflow-x:scroll; 
.search-table, td, thborder-collapse:collapse; border:1px solid #777;
thpadding:20px 7px; font-size:15px; color:#444; background:#66C2E0;
tdpadding: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/

【问题讨论】：

如果你使用the right CSS，你可以去掉包装器。

【参考方案1】：

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

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

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

【讨论】：

太棒了！这就是我所需要的！谢谢先生您的解决方案

【参考方案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; 是可选的（但对本演示很有用）。

【讨论】：

这真的非常适合降价，而无需像其他答案那样使用表格包装器。

这对于通过 WYSIWYG 编辑器添加的表格立即起作用，其中没有包装器，添加一个将是大量工作。谢谢@Kaspar Etter

这正是我需要的 RTE 表 - 谢谢！

请注意，此解决方案不利于可访问性 (explanation)

请记住，将显示从table 更改为block 可能会影响表的子项。例如，我遇到了孩子不占据整个容器宽度的问题。

【参考方案3】：

没有人提到的解决方案是使用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/>。

【讨论】：

我不必使用white-space: nowrap，但我试图在桌子上使用overflow-x: scroll。你为桌子制作一个容器并在那里使用它的建议救了我。 TY

【参考方案4】：

除非我严重误解了你的问题，否则将 overflow-x:scroll 从 .search-table 移至 .search-table-outter。

http://jsfiddle.net/ZXnqM/4/

.search-table-outter border:2px solid red; overflow-x:scroll;
.search-tabletable-layout: fixed; margin:40px auto 0px auto;   

据我所知，您不能为表格本身提供滚动条。

【讨论】：

感谢您的回复。关闭，但不完全正确，因为单元格的高度 (<td>) 仍会自动调整，请注意即使 max-height:35px; 单元格的高度超过 35 像素...

【参考方案5】：

   .search-table-outter border:2px solid red; overflow-x:scroll;
   .search-tabletable-layout: fixed; margin:40px auto 0px auto;   
   .search-table, td, thborder-collapse:collapse; border:1px solid #777;
   thpadding:20px 7px; font-size:15px; color:#444; background:#66C2E0;
   tdpadding:5px 10px; height:35px;

您应该在 div 中提供滚动。

【参考方案6】：

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

@media only screen and (max-width: 480px)
  .scroll-wrapper
    position:absolute;
    overflow-x:scroll;