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

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

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

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

我怎么做呢?

当前回答

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

2008-11-03 11:27:50

其他回答

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

2012-07-18 04:04:21

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

同时显示两者:

<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

我使用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/(不与上述代码工作)

2015-10-02 16:06:15

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

推荐文章

最新文章

标签