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;

微软威胁要在IE8标准模式下将所有CR前标准属性移动到他们自己的'-ms'框中。（如果他们总是以这种方式做到这一点会有意义，但现在对每个人来说都是一种不便。）

另一方面，IE8完全有可能修复bug。

Answer 2

我还必须在样式中添加white-space: nowrap;，否则元素将包含在我们删除滚动功能的区域中。

Answer 3

此解决方案没有父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

Answer 4

同时显示：

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

Answer 5

你也可以使它overflow: auto并给出一个最大的固定高度和宽度，当文本或其中的任何内容溢出时，它将只显示所需的滚动条

Answer 6

我使用CSS属性： 1）＆＃34; overflow-x: auto＆＃34 ;; 2）＆＃34; overflow-y: hidden＆＃34 ;; 3）＆＃34; white-space: nowrap＆＃34 ;;

不要忘记为容器和内部DIVS组件设置宽度。 属性＆＃34; white-space：nowrap＆＃34; 允许内部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/（不使用上述代码）

Answer 7

使用以下

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

Answer 8

CSS3 具有overflow-x属性，但我不希望得到很好的支持。在 CSS2 中，您所能做的就是设置一般scroll政策，让您的widths和heights不要搞乱它们。

Answer 9

.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; }

Answer 10

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

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

10 个答案: