我有一个div容器，并定义了它的风格如下:
div#tbl-container
{
width: 600px;
overflow: auto;
scrollbar-base-color:#ffeaff
}
一旦我填充了这个div所包含的表格，就会自动给我水平和垂直的滚动条。 我只希望水平滚动条自动出现。我将通过编程方式修改表的高度。
我怎么做呢?
当前回答
我们应该设置为overflow: auto并隐藏一个在不支持CSS3的浏览器上不使用的滚动条。 看看这个CSS Overflow;XME.im
其他回答
我们应该设置为overflow: auto并隐藏一个在不支持CSS3的浏览器上不使用的滚动条。 看看这个CSS Overflow;XME.im
我使用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/(不与上述代码工作)
我还必须添加空白: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>
你也可以让它overflow: auto，并给出一个固定的最大高度和宽度，这样当文本或其他内容溢出时，它只会显示所需的滚动条
