HTML-table 按需提供水平和垂直滚动条

Question

我想要 HTML-table 来显示滚动条（水平和垂直），一旦浏览器 window 变得太小而无法完全显示 table.

请看下面的例子：JSFiddle example

我怀疑 main-div 有问题：

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

示例代码的问题如下：水平滚动条出现，如果window变得太小，但只有在table的几个像素已经被切割后才会出现/ 用鼠标调整浏览器大小时不可见 window。并且显示在页面底部，但是我希望它直接显示在table的底部。垂直滚动条根本没有出现。我不想更改用户可见的页面布局，所以这不是一个选项。

Answer 1

有几件事让我很不爽，主要是绝对定位和左推 div。因为您将其设置为绝对值，所以它会忽略其他元素并以自己想要的方式做出反应。

同时通过 overflow:hidden 在 html/body 上禁用滚动将切断 div 的一部分，同时它是绝对定位的。

我做了一些更改，请参见下文。但是请检查 link 并让我知道现在是否已实现所需的行为。

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 的 Fiddle 并仅更改了 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;
    }

滚动条显示在浏览器的底部和右侧-window（不是 table），但至少它有效。

HTML-table 按需提供水平和垂直滚动条

HTML-table with horizontal and vertical scrollbars on demand

html

css

html-table

scrollbars