Question

我使用以下HTML浏览器与IE8及更高版本的浏览器一起使用：

<div><table class="grid table">

和.css文件：

.grid {
clear: both;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

这样可行，但是当我的桌子大于包含DIV时，它会离开屏幕。

如何制作它以便滚动条允许我向桌面左右滚动，如果它对于屏幕来说太大了？

Answer 1

向overflow: auto;元素添加div CSS声明。

<强> JSBin Demo

<强> CSS：

.box {
  height: 150px;
  border: 1px solid black; /* Just for demo */

  overflow: auto;
}

<强> HTML：

<div class="box">
    <table>
        <tr>
            <td>Cell #1</td>
            <td>Cell #2</td>
            <td>Cell #3</td>
            <td>Cell #4</td>
            <td>Cell #5</td>
        </tr>
        <!-- so on... -->
    </table>
</div>

更新

如果只需要水平滚动，请改用overflow-x: auto;。

<强> JSBin Demo

Answer 2

添加overflow-y:auto;

DEMO http://jsfiddle.net/kevinPHPkevin/SHbnM/

div {
    overflow-y:auto;
    height:100px;
}

Answer 3

最简单的方法是将overflow属性添加到周围的div中。该文档为here。

如何将滚动条添加到包含表格的DIV？

3 个答案:

更新