表格单元格中的水平滚动答案

【问题标题】：Horizontal scroll in table cell表格单元格中的水平滚动
【发布时间】：2014-09-29 06:01:11
【问题描述】：

我有以下特殊问题。让我们从代码 sn-p 开始：

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

现在我希望表格呈现为好像 div.scrollable 不会占用任何水平空间（即 div.scrollable 不会在表格的右侧推动），但显示水平滚动条（在 @ 987654324@，而不是整个单元格）如果div.scrollable 比包含单元格更宽。可以通过 CSS 实现吗？

谢谢！

【问题讨论】：

你的 CSS 是什么样子的？
有可能，你试过什么？查看 css 溢出属性。

标签： html css

【解决方案1】：

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

编辑抱歉，您还需要display:block; td

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

更新： 请参阅 jsfiddle 示例，注意表格上的 100% 宽度和固定布局。这就是为了阻止示例仅向视口添加水平滚动并继续。 http://jsfiddle.net/MMeTe/4/

【讨论】：

好的，我忘了说我不想在单元格上设置特定的宽度来让它容纳其他内容。
好吧，有点需要看看你用它做什么，即如果桌子有固定的宽度，或者你想让它流动到视口？那么也许你应该对这个特定的td 应用一个类并在其上设置一个 % 宽度？因为您的td 只会调整大小以适应其内容。或者在scrollable 周围添加一个包装器，并为包装器应用宽度。
假设表格占视口宽度的 80%，而里面的可滚动 div 的宽度固定为 500px（例如）。在这种情况下，只有当 80% 的视口小于 500px 时，可滚动的 div 才应该有水平滚动条，否则 div 应该是完全可见的。
我的 jsfiddle 示例回答了您最初的问题，所以请看一下。关于在表格可以容纳滚动条 div 时禁用滚动的单独问题，可能需要持续的 javascript 检查以查看表格是否已调整大小。或者设置媒体查询以在视口上设置宽度条件和应用覆盖样式。
可能是@media screen and (min-width: 500px){ .scrollable { overflow: hidden; } } 这样的东西，但我没有尝试过，但你明白了，只需在网络上搜索有关媒体查询的更多信息。

【解决方案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>

【讨论】：

如果答案有帮助，请考虑投票，如果它为您提供了解决方案，则将其标记为答案，它对每个人都有帮助。谢谢