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

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

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

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

我怎么做呢?

当前回答

同时显示两者:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">      </div>

隐藏X轴:

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">      </div>

隐藏Y轴:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">      </div>

2009-11-30 15:07:52

其他回答

使用以下方法

<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

.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px;  border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;}


.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;}
.box-author-txt ul li{ list-style-type:none;  width:140px; }

2012-12-11 06:04:19

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

2012-07-18 04:04:21

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

2011-11-29 23:16:27

同时显示两者:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">      </div>

隐藏X轴:

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">      </div>

隐藏Y轴:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">      </div>

2009-11-30 15:07:52

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

推荐文章

最新文章

标签