表格单元格中的水平滚动

我有以下特殊问题。让我们开始的代码片段：表格单元格中的水平滚动

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

现在我想表呈现仿佛div.scrollable不会采取任何的横向空间（即div.scrollable不会对表的右侧推），但秀水平滚动条（在div.scrollable上，而不是在整个单元格上）如果div.scrollable比包含单元格更宽。有可能通过CSS来完成吗？

谢谢！

来源

2013-01-24 baa2w

什么做你的CSS是什么样子？ –

这是可能的，你有什么尝试？看看CSS溢出属性。 – sachleen

幸得高价作为他的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>

来源

2013-01-24 18:00:41 baa2w

如果答案有帮助，请考虑投票，如果它给了您一个解决方案，那么将其标记为答案，它可以帮助每个人。谢谢 – Pricey

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

编辑对不起，你还需要display:block;在td

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

UPDATE： 见的jsfiddle例子中，注意在桌子上，固定布局的宽度为100％..这就是停止例如从向视口添加水平滚动并继续。 http://jsfiddle.net/MMeTe/4/

来源

2013-01-24 00:56:55 Pricey

好吧，我忘了提及我不想在单元格上设置特定的宽度以容纳其他内容。 – baa2w

好吧，有点需要看看你使用它，即如果表有一个设置的宽度，或者如果你希望它流动到视口？那么也许你应该将一个类应用于这个特定的'td'并在其上设置一个％宽度？因为你的'td'只是调整大小以适应其内容。或者在'scrollable'周围添加一个包装，并将宽度应用于包装。 – Pricey

假设表格占用了视口宽度的80％，而可滚动div的内部固定宽度为500px（作为示例）。在这种情况下，只有当视口的80％低于500像素时，可滚动div才应具有水平滚动条，否则div应该完全可见。 – baa2w

表格单元格中的水平滚动

回答

相关问题