Div 오른쪽 고정 된 열이있는 테이블

Question

저는 최근 비영리 웹 사이트를 프로젝트로 사용했습니다. 기존 웹 사이트에서 작업 중이므로 이미 프로그래밍 된 많은 작업을해야하므로 디자인을 만드는 것이 전부입니다. http://jsfiddle.net/RmWu7/ :

내가 이미이 무엇을 JSFIDDLE을했다 :

나는 내가 할 방법을 알아낼 수 없습니다 기본적으로 무엇도했다. 나는 테이블 형 데이터를 위해 테이블을 사용해야 만한다는 것을 알고 있지만, 프로그래밍은 약간 이상하다. 그리고 PHP를 수정하여 정규 테이블과 작업하는 방법을 알아낼 수 없다. divs.

그래서 두 가지 :

1. 나는 .last 클래스 .columns에 position:fixed을 추가하는 시도

   , 나머지에 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); 
});