我有一个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
其他回答
我还必须添加空白:nowrap;样式，否则元素就会被收拢到我们要移除滚动功能的区域。
您不应该同时获得水平和垂直滚动条，除非您将内容设置得足够大。
但是你通常在IE中因为一个bug而这样做。检查一下其他浏览器(火狐等)，看看是不是只有IE在这样做。
IE6-7(包括其他浏览器)支持提议的CSS3扩展来独立设置滚动条，你可以使用它来抑制垂直滚动条:
overflow: auto;
overflow-y: hidden;
你可能还需要为IE8添加:
-ms-overflow-y: hidden;
因为微软威胁要在IE8标准模式中将所有pre- cr标准属性转移到他们自己的“-ms”框中。(如果他们一直这样做的话，这是有道理的，但现在对每个人来说都很不方便。)
另一方面，IE8完全有可能已经修复了这个bug。
.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; }
同时显示两者:
<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>
使用以下方法
<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >
