固定右欄的Div表

Question

我最近把一個非營利性網站作爲一個項目。我正在與一個現有的網站合作，所以我不得不處理很多已編程的東西，所以我只需要創建設計。

我做基本上是什麼的圖我無法弄清楚如何做到：

我還做了什麼已經有一個的jsfiddle：http://jsfiddle.net/RmWu7/。我知道我應該爲表格數據使用表格，但編程有點奇怪，我似乎無法弄清楚如何修改php以使用常規表格，所以我只是想保留div的。

所以兩兩件事：

1. 我嘗試添加一個position:fixed到.columns與.last類和overflow-x:auto休息，但它完全攪亂佈局。

2. 如何獲得列爲固定大小而不是流體，並使最後一個非固定列（在具有.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); 
});