按需提供水平和垂直滚动条的 HTML 表格

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 移动的左侧。因为您将其设置为绝对值，所以它会忽略其他元素并以自己想要的方式使用react。

同时通过 overflow:hidden 禁用滚动 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;
    }