Div with horizontal scrolling only

I have a fixed width DIV containing a table with many columns, and need to allow the user to scroll the table horizontally within the DIV.

This needs to work on IE6 and IE7 only (internal client application).

The following works in IE7:

overflow-x: scroll;

Can anyone help with a solution that works in IE6 as well?

406299 次浏览
小开
最佳答案

解决方法很简单。为了确保不影响表中单元格的宽度，我们将关闭 white-space。为了确保我们得到一个水平滚动条，我们将打开 溢出 x。差不多就是这样:

.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}

You can see 这里的最终结果, or in the animation below. If the table determines the height of your container, you should not need to explicitly set overflow-y to hidden. But understand that is also an option.

enter image description here

小开 
overflow-x: scroll;
overflow-y: hidden;

编辑:

这对我很有用:

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
<div style='width:400px;height:250px'></div>
</div>
小开

我无法得到所选择的答案，但经过一点 研究，我发现水平滚动 div 必须在 CSS 中有 white-space: nowrap。

Here's complete working code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Something</title>
<style type="text/css">
#scrolly{
width: 1000px;
height: 190px;
overflow: auto;
overflow-y: hidden;
margin: 0 auto;
white-space: nowrap
}


img{
width: 300px;
height: 150px;
margin: 20px 10px;
display: inline;
}
</style>
</head>
<body>
<div id='scrolly'>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
<img src='img/car.jpg'></img>
</div>
</body>
</html>
小开

对于水平滚动，请记住以下两个属性:

overflow-x:scroll;
white-space: nowrap;

参见工作链接: 点击我

超文本标示语言

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better   control of the layout. The default value is visible.You can use the overflow property when you want     to have better control of the layout. The default value is visible.</div>

CSS

div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}
小开

试试这个:

HTML:

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>

CSS:

.container {
width: 200px;
height: 100px;
display: flex;
overflow-x: auto;
}


.item {
width: 100px;
flex-shrink: 0;
height: 100px;
}

这个空白: nowrap; 属性不允许您换行文本


提交答案