表格单元格中的水平滚动

Question

我有一个奇怪的问题。我们先看一下代码片段：

...
<td>
   <div class="scrollable">...</div>
   ...other cell content...
</td>
...

现在我希望表格的呈现方式就好像不占据任何水平空间（即不会推动表格的右侧），但如果比包含它的单元格更宽，则显示水平滚动条（在上，而非整个单元格）。这是否可以通过CSS实现？

谢谢！

- baa2w

---

你的 CSS 是什么样子？ - t q

可以实现，你尝试过什么？看一下CSS的overflow属性。 - sachleen

Answer 1

使用您提供的基本示例，您可能需要在 td 上设置固定宽度，并使用 overflow 和 overflow-y。 overflow-y 仅适用于 CSS3，但您没有指定 IE8 及以下版本。

编辑 抱歉，您还需要在 td 上添加 display:block;

td { display: block; width: 50px; } 
.scrollable { overflow: scroll; overflow-y:hidden; }

更新： 查看 jsfiddle 示例，请注意表格的 100％ 宽度和固定布局.. 这是为了防止示例只向视口添加水平滚动并继续进行。 http://jsfiddle.net/MMeTe/4/

- Pricey

---

好的，我忘了提到我不想设置单元格的特定宽度以让它适应其他内容。 - baa2w

好的，我需要了解你用它来做什么，比如表格是否有固定宽度，或者你希望它与视口保持流动？然后，也许你应该为这个特定的td应用一个类，并在其上设置一个百分比宽度？因为你的td将会调整大小以容纳其内容。另外，在scrollable周围添加一个包装器，并为其应用一个宽度。 - Pricey

假设表格占据了视口宽度的80％，而其中可滚动的div具有固定宽度500px（仅作为示例）。在这种情况下，如果视口的80％小于500px，则可滚动的div应仅具有水平滚动条，否则该div应完全可见。 - baa2w

我的jsfiddle示例回答了你最初的问题，所以请查看一下。你关于禁用滚动条的单独问题，当表格可以容纳滚动条div时，可能需要不断进行javascript检查来查看表格是否已调整大小...或者设置一个媒体查询来在视口上设置宽度条件并应用覆盖样式。 - Pricey

类似这样的代码 @media screen and (min-width: 500px){ .scrollable { overflow: hidden; } } 或许可以实现，但我没有尝试过。你可以在网上搜索更多关于媒体查询的信息。 - Pricey

Answer 2

感谢Pricey，他的jsfiddle示例回答了这个问题，但为了在这里附上带有代码的答案，我将其附在下面：

...
<style type="text/css>
  .mytable {
    table-layout: fixed;
  }
  .scrollable{
    overlow-y: auto;
  }
</style>
...
<table class="mytable">
 <tr>
  <td>
   <div class="scrollable">...</div>
   other content...
  </td>
 </tr>
</table>

- baa2w

---

如果这个答案对您有帮助，请考虑点赞它；如果它为您提供了解决方案，请将其标记为答案，这将有助于每个人。谢谢。 - Pricey