How to make a table with two fixed columns responsive?

Question

I have a table with two fixed columns, one on the left and one on the right.

At the moment it only works in one resolution. But when the resolution is changed, the column on the right gets very messed up.

This is the main class that controls the margins (to allow room for the fixed columns) along with the width:

#myTable > .wrapper {
    overflow-x: scroll;
    overflow-y: visible;
    width: 83%;
    margin-left: 126px;
    margin-right: 45px;
}

I have tried going into the developer tools and changing the width value down as I resize the browser. So far, this is the only solution I have found. Although, this would requre tons of media queries which is not a preferable solution.

How could I possibly edit my css classes to make this responsive?

Here is a demo

Answer 1

Try limiting the width of the wrapper by using min-width and max-width :

#myTable > .wrapper {
    overflow-x: scroll;
    overflow-y: visible;
    max-width: 83%;
    min-width: 40%;
    margin-left: 126px;
    margin-right: 45px;
}

FIDDLE DEMO