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

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

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

我怎么做呢?


当前回答

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

其他回答

同时显示两者:

<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>

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

你也可以让它overflow: auto,并给出一个固定的最大高度和宽度,这样当文本或其他内容溢出时,它只会显示所需的滚动条

您不应该同时获得水平和垂直滚动条,除非您将内容设置得足够大。

但是你通常在IE中因为一个bug而这样做。检查一下其他浏览器(火狐等),看看是不是只有IE在这样做。

IE6-7(包括其他浏览器)支持提议的CSS3扩展来独立设置滚动条,你可以使用它来抑制垂直滚动条:

overflow: auto;
overflow-y: hidden;

你可能还需要为IE8添加:

-ms-overflow-y: hidden;

因为微软威胁要在IE8标准模式中将所有pre- cr标准属性转移到他们自己的“-ms”框中。(如果他们一直这样做的话,这是有道理的,但现在对每个人来说都很不方便。)

另一方面,IE8完全有可能已经修复了这个bug。

我使用CSS属性: 1)“overflow-x:汽车”; 2)“overflow-y:隐藏”; 3)“空白:nowrap "};

不要忘记为容器和内部DIVS组件设置Width。属性“white-space: nowrap”允许内部DIVS不落在不同的行上。

考虑下面的HTML:

<div class="container"> 
  <div class="inner-1"></div>
  <div class="inner-2"></div>
  <div class="inner-3"></div>
</div>

我使用下面的CSS来实现水平滚动:

.container {
  height: 80px;
  width: 600px;
  overflow-x: auto;
  overflow-y: hidden; 
  white-space: nowrap;
}
.inner-1,.inner-2,.inner-3 {
  height: 60px;
  max-width: 250px;
 display: inline-block; /* this should fix it */
}

小提琴:https://jsfiddle.net/qrjh93x8/(不与上述代码工作)