帶有水平和垂直滾動條的HTML表

Question

我希望HTML表格在瀏覽器窗口變得太小而無法完全顯示表格時顯示滾動條（水平和垂直）。

請參見以下示例： JSFiddle示例

我懷疑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的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;
    }

滾動條顯示在瀏覽器窗口（而不是表格的窗口）的底部和右側，但至少可以使用。