CSS div元素-如何只显示水平滚动条？

Question

我有一个div容器，它的样式定义如下：

div#tbl-container 
{
    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff
}

一旦我填充了包含在这个div中的表，它就会自动提供水平和垂直滚动条。我只想让水平滚动条自动出现。我将以编程方式修改表的高度。

我该怎么做呢？

Answer 1

您不应该同时获得水平和垂直滚动条，除非您将内容做得足够大，以便需要它们。

然而，由于存在错误，您通常会在IE中执行此操作。签入其他浏览器(Firefox等)找出是否只有IE在做这件事。

IE6-7 (在其他浏览器中)支持建议的CSS3扩展来独立设置滚动条，您可以使用该扩展来抑制垂直滚动条：

overflow: auto;
overflow-y: hidden;

您可能还需要为IE8添加：

-ms-overflow-y: hidden;

因为微软威胁要将所有之前的CR标准属性移到他们自己的IE8标准模式下的‘-ms’框中。(如果他们总是这样做，这是有意义的，但现在对每个人来说都很不方便。)

另一方面，无论如何，IE8完全有可能已经修复了这个bug。

Answer 2

我还必须将white-space: nowrap;添加到样式中，否则元素会自动换行到我们将不能滚动到的区域。

Answer 3

这个解决方案是没有为父指定高度/宽度的，因此它将是响应来调整窗口大小，并且最有用的原因是水平滚动条在需要时出现。

.container{
    padding:20px;
    border:dotted 1px;
    white-space:nowrap;
    overflow-x:auto;
}

.box{
    width:100px;
    height:180px;
    background-color: red;
    margin:10px;
    display:inline-block
}

看一看DEMO