Question

我有一个固定宽度的DIV，其中包含一个包含许多列的表，并且需要允许用户在DIV中水平滚动表。

这只需要在IE6和IE7上工作（内部客户端应用程序）。

以下适用于IE7：

overflow-x: scroll;

任何人都可以帮助解决在IE6中运行的解决方案吗？

Answer 1

解决方案非常简单。为确保我们不会影响表格中单元格的宽度，我们将关闭 white-space 。为了确保我们获得水平滚动条，我们将打开 overflow-x 。这就是它：

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

您可以在下面的动画中看到the end-result here。如果表格确定了容器的高度，则无需将overflow-y明确设置为hidden。但要明白，这也是一种选择。

Answer 2

我无法让选定的答案工作但是在research之后，我发现水平滚动div必须在css中有white-space: nowrap。

这是完整的工作代码：

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

Answer 3

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>

Answer 4

水平滚动的

记住这两个属性：

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

请参阅工作链接：click me

HTML

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

Answer 5

尝试一下：

HTML：

df2 = df1[(df1['OS Version'].str.contains(MATCH_PATT,  na=False)) & (df1['Aux Site'].str.contains('VCAD')==False)] [['Hostname', 'IP Address', 'Aux Site', 'OS Version']]

CSS：

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

空白：nowrap；属性不让您换行。请看这里的例子：https://codepen.io/oezkany/pen/YoVgYK

只有水平滚动的Div

5 个答案: