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

我有一个div容器，并定义了它的风格如下:

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

一旦我填充了这个div所包含的表格，就会自动给我水平和垂直的滚动条。我只希望水平滚动条自动出现。我将通过编程方式修改表的高度。

我怎么做呢?

当前回答

这个解决方案没有父div的高度/宽度规格，因此它将响应窗口大小的调整，最有用的原因是水平滚动条只出现在需要的时候。

.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

2014-09-05 14:25:06

其他回答

我们应该设置为overflow: auto并隐藏一个在不支持CSS3的浏览器上不使用的滚动条。看看这个CSS Overflow;XME.im

2012-07-18 04:04:21

使用以下方法

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >

2013-06-19 21:24:25

CSS3有overflow-x属性，但我不期望对它有很好的支持。在CSS2中，你所能做的就是设置一个通用的滚动策略，并调整宽度和高度，以免把它们弄乱。

2008-11-03 11:27:50

我还必须添加空白:nowrap;样式，否则元素就会被收拢到我们要移除滚动功能的区域。

2011-11-29 23:16:27

这个解决方案没有父div的高度/宽度规格，因此它将响应窗口大小的调整，最有用的原因是水平滚动条只出现在需要的时候。

.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

2014-09-05 14:25:06

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

推荐文章

最新文章

标签