Div table with fixed right column

Question

I recently became a nonprofit site as a project. I work with an existing website, so I have to work with a lot of already programmed files, so all I need to do is create a design.

I made a diagram basically that I cannot figure out how to do this:

I also made JSFIDDLE of what is already there: http://jsfiddle.net/RmWu7/ . I know that I have to use a table for tabular data, but the programming is a bit strange, and I can’t figure out how to change php to work with a regular table, so I’ll just support divs.

So, two things:

• I tried adding position:fixedin .columns with the class .lastand overflow-x:autoto the rest, but it completely messed up the layout.

• ( .last), , , ?

CSS, jQuery?

!

Answer 1

. , .

<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);
});