表格单元格中的水平滚动

Question

我有以下特殊问题.让我们从代码片段开始:

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

现在我想表渲染,好像div.scrollable不会采取任何的横向空间(即div.scrollable不压在桌子上的右侧),但显示水平滚动条(上div.scrollable,而不是在整个细胞)如果div.scrollable是比含有细胞更宽.这可以通过CSS做到吗？

谢谢!

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