Html 表格单元格中的水平滚动

我有以下特殊的问题。让我们从一个代码段开始：

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

。。。
...
…其他单元格内容。。。
...

现在，我希望表格呈现为

div.scrollable

不会占用任何水平空间（即

div.scrollable

不会推到表格的右侧），而是显示水平滚动条（在

div.scrollable

上，而不是在整个单元格上）如果

div.scrollable

比包含单元格宽。这可以通过CSS实现吗

---

谢谢

使用基本示例，您可能需要在

td

上设置宽度，并使用

overflow

和

overflow-y

overflow-y

仅为CSS3，但未指定IE8及以下版本

编辑抱歉，您还需要

显示：块在
td

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

更新：
请参见JSFIDLE示例，注意表上的100%宽度和固定布局。。这将阻止示例仅向视口添加水平滚动并继续。
普莱斯的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>

。。。
你的css看起来像什么？有可能，你尝试过什么？看看css overflow属性。好吧，我忘了提到我不想在单元格上设置一个特定的宽度，让它容纳其他内容。好吧，我需要看看你使用它的目的是什么，也就是说，如果表格有一个设置的宽度，或者你想让它流向视图端口？那么，也许您应该对这个特定的
td
应用一个类，并在其上设置一个%width？因为您的
td
只会调整大小以适应其内容。。或者在
可滚动
周围添加一个包装，并对包装应用一个宽度。例如，表格占视口宽度的80%，其中可滚动div的固定宽度为500px（例如）。在这种情况下，只有当80%的视口低于500px时，可滚动div才应该具有水平滚动条，否则div应该完全可见。当表格可以容纳scrollbar div时，您关于禁用滚动的单独问题可能需要不断进行javascript检查，以查看表格是否已调整大小。。或者设置媒体查询，在查看端口上设置宽度条件并应用覆盖样式。类似于这样的内容可能是
@media screen和（最小宽度：500px）{.scrollable{overflow:hidden；}}
，但我还没有尝试过，但你明白了，只是在网上搜索更多关于媒体查询的信息。如果答案是有用的，请考虑投票，如果它给你一个解决方案，然后把它标记为答案，它会帮助每个人。谢谢