html - 表格单元格中的水平滚动

Question

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

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

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

谢谢！

Answer 1

使用您的基本示例，您可能需要在tdand 上设置宽度才能使用overflowand 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/

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>