Fixed Right Column Table Scales To Responsive Design

I have a table with a right fixed column and there are 8 columns on the left with an x-scroll. I used code similar to this how do I create an HTML table with fixed/frozen left colu

Solution 1:

I updated your fiddle with a possible answer:

.page-header {
  padding-bottom: 9px;
  margin: 40px020px;
  border-bottom: 1px solid #eeeeee;
}

@media (max-width: 1300px) {
    .table-hoverth, .table-hovertd {
        padding: 9px;
    }
    .table-responsive {
        width: inherit;
        max-width: 80%;
        margin-bottom: 15px;
        overflow-x:  scroll;
        overflow-y: hidden;
        border: 0;
        border-right:200px solid transparent;
    }

    .crud-links{
        position: absolute;
        overflow:hidden;
        width: 191px;
        right: 0;
        background-color: #ffffff;
    }
}

https://jsfiddle.net/5L7jkbfq/12/

The main issue is that you were mixing fixed dimensions in pixels with relative dimensions in percent in the table itself.

In my solution, I removed the cell-padding from the html code and used the right border as a mini hack to allow you having a responsive width box with a fixed-width column.

Solution 2:

Your table is not inheriting the max-width.

.table-responsivetable {
    table-layout:fixed;
}

I tried setting the table-layout to fixed from this answer: Why is my HTML table not respecting my CSS column width?

This didn't work so I modified the max-width using JQuery on window resize, from this answer:

JQuery For Setting A Dynamic max-width

https://jsfiddle.net/wqfhuknu/

However, I had to change the width to 80% to get no overlap whatsoever.