表格溢出时的水平滚动

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/

- AnchovyLegend

---

如果您使用正确的CSS，您可以摆脱包装器。 - Kaspar Etter

Answer 1

我认为你的overflow应该在外部容器上。你也可以明确地为列设置最小宽度。像这样：

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

JSFiddle：http://jsfiddle.net/5WsEt/

- mayabelle

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

- Kaspar Etter

---

这对于使用Markdown而不使用像其他答案那样的表格包装器确实非常有效。 - John Siu

谢谢。一直以来我都缺少了display:block;。 - Upulie Han

请注意，此解决方案不适用于可访问性（解释）。 - clhenrick

记住，将显示方式从“table”更改为“block”可能会影响表格中的子元素。例如，我遇到了一个问题，即子元素无法占满容器的整个宽度。 - Eugene Karataev

@Martin_W，你能提供一个例子吗？我使用上述CSS样式对<thead>元素进行样式设置没有任何问题。 - Kaspar Etter

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

- The.Bear

---

我本来不需要使用 white-space: nowrap，但是我试图在表格本身上使用 overflow-x: scroll。你建议我为表格创建一个容器并在那里使用它，这拯救了我。谢谢！ - s3c

Answer 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-table{table-layout: fixed; margin:40px auto 0px auto;   }

据我所知，您无法为表格本身添加滚动条。

- TreeTree

---

感谢回复。接近了，但并不完全正确，因为单元格（<td>）的高度仍然会自动调整，即使 max-height:35px;，单元格的高度仍可能远超过35像素... - AnchovyLegend

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 中提供滚动条。

- surbhi bakshi

Answer 6

在移动设备上的响应式网站中，整个页面必须相对于一个相对定位的 div 进行绝对定位，并设置固定高度。同时需要设置媒体查询以确保适配性。

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

- user2323922