Div Table With Fixed Right Column

I recently took up a non-profit website as a project. I'm working with an existing website, so I'm having to work with a lot of the stuff already programmed, so all I have to do is

Solution 1:

Ok I've totally change the codes as my previous version has problem on scrolling.

<div class="table">
    <div class="wrap">
        <div class="wrap2">
            <div class='column'>
                <div class='row top'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
            </div>
            <div class='column'>
                <div class='row top'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
            </div>
            <div class='column'>
                <div class='row top'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
            </div>
        </div>
    </div>
    <div class='column fixed-column'>
      <div class='row top'>Test</div>
      <div class='row'>Test</div>
      <div class='row'>Test</div>
      <div class='row'>Test</div>
      <div class='row'>Test</div>
      <div class='row'>Test</div>
      <div class='row'>Test</div>
    </div>
</div>

css:

.table{
    overflow: hidden;
    position: relative;
    .wrap {
        overflow-x: auto;
    }
    .wrap2 {
        overflow: hidden;
        zoom: 1;
    }
    .column{
        float:left;
        background:red;
        width:200px;
        .row{
            padding:10px;
            &.top{
                background:green;
            }
        }
        &.fixed-column {
            position: absolute;
            right: 0;
            top: 0;
            background:blue;
        }
    }
}

jQuery:

$(function() {
    var scrollingWidth = $('.table').innerWidth();
    var lastWidth = $('.table .wrap .column:last').outerWidth();
    var innerWidth = 0;
    $('.table .column').each(function() {
        innerWidth += $(this).outerWidth();
    });
    var gap = scrollingWidth - innerWidth + lastWidth;
    if(gap > lastWidth) {
        $('.table .wrap .column:last').css('width', gap);
        innerWidth += gap - lastWidth;
    }
    $('.table .wrap2').css('width', innerWidth);
});