HTML-table with horizontal and vertical scrollbars on demand

I want a HTML-table to show the scrollbars (both horizontal and vertical), as soon as the browser window becomes too small to fully show the table.

Please see the following example: JSFiddle example

I suspect the main-div to be the faulty one:

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

The problem with the example code is the following: the horizontal scrollbar appears, if the window becomes too small, but it appears only after a few pixels of the tables are already cut/ invisible when resizing the browser window with the mouse. And it is shown at the bottom of the page, but I want it to be shown directly at the bottom of the table. And the vertical scrollbar doesn't appear at all. I don't want to change the page layout visible for the user, so that's not an option.

I've finally found a solution which is not perfect but it works:

I used Joe Corby's Fiddle and changed only the following part in the 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;
    }

The scrollbars are shown at the bottom and at the right-hand-side of the browser-window (not of the table) but at least it works.