Question

一旦浏览器窗口变得太小而无法完全显示表格，我想要一个HTML表格来显示滚动条（水平和垂直）。

请参阅以下示例：JSFiddle example

我怀疑main-div是错误的：

    .myMain {
        background-color: #e9edf1;
        overflow: auto;
        width: 100%;
        top: 130px;
        left: 20px;
        bottom: 1px;
        position: absolute;
    }

示例代码的问题如下：如果窗口变得太小，则会出现水平滚动条，但只有在使用鼠标调整浏览器窗口大小时，表格的几个像素已经被切割/不可见时才会出现。它显示在页面底部，但我希望它直接显示在表格的底部。并且垂直滚动条根本不出现。我不想更改用户可见的页面布局，因此不能选择。

Answer 1

有一些事情让我失望，主要是绝对的定位和左边推动了div。因为你将它设置为绝对值，它将忽略其他元素并以其自己想要的方式作出反应。

同样禁用滚动通过溢出：隐藏在html / body上将切断div的一部分，加上它绝对定位。

我做了一些改动，见下文。但请检查链接，并告诉我现在是否已达到所需的行为。

https://jsfiddle.net/0ksb8s8x/1/

html, body {
        font-family: Segoe UI, Tahoma, Arial;
        font-size: 11px;
        margin: 0;
        padding: 0;
        background-color: #e9edf1;
        overflow:auto;
        width:100%;
        height:100%;
    }

.myMain {
          background-color: #e9edf1;
          overflow: auto;
          width: 105%;
          padding: 20px;
          top: 0px;
          left: 0px;
          bottom: 1px;
          position: relative;
    }

Answer 2

我终于找到了一个不完美的解决方案，但它确实有效：

我使用了Joe Corby的小提琴并改变了CSS中的以下部分：

        .myMain {
        background-color: #e9edf1;
        overflow: auto;
        padding-left: 30px;
        padding-top: 20px;
        position: absolute;
        top: 120px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        width: auto;
        height: auto;
    }

滚动条显示在浏览器窗口的底部和右侧（不是表格），但至少它可以正常工作。

带有水平和垂直滚动条的HTML表格

2 个答案: