HTML 테이블 컬럼

나는 고정 된 열이있는 테이블을 만들려고 노력하고있어, 나는이 다음 예제있어 폭 냉동 :HTML 테이블 컬럼

컨테이너 :

div { 
      width: 600px; 
      overflow-x:scroll; 
      margin-left:5em; 
      overflow-y:visible; 
      padding-bottom:1px; 
     }

을 고정 열 :

.headcol { 
      position:absolute; 
      width:5em; 
      left:0; 
      top:auto; 
      border-right: 0px none black; 
      border-top-width:3px; /*only relevant for first row*/ 
      margin-top:-3px; /*compensate for top border*/ 
     }

문제는 컨테이너의 높이가 고정 된 경우 (예 : 100px) 고정 열은 스크롤 바에 첨부되지 않고 기본 높이를 유지합니다.

출처

2012-11-23 Anonymous

내가 질문을 이해하지 않는이 ... 무엇 * 기본 높이 *와 스크롤바에 첨부 된 *의 의미는 무엇입니까? –

나는 이것이 이것이 문제라는 것을 의미한다고 생각한다 : http://jsfiddle.net/YMvk9/783/ – MikeSmithDev

오케이. 그래서 질문은 실제로 : ** 첫 번째 열을 고정시키고 싶지만 전체 테이블도 수직으로 스크롤 할 수 있어야합니다 **. 그리고 첫 번째 행을 고정하기를 원하는 새로운 조건을 따르지 마십시오. ;) 실제로 매우 재미있을 것입니다. 이미 JSFiddle에서 예제를 발견 한 것은 아주 좋은 속임수입니다. 매우 똑똑한 ... –

상대 위치 지정으로 설정할 수있는 추가 컨테이너를 추가하십시오.

아래 예제에서 고정 행은 나머지 행과 수직으로 스크롤됩니다. 조금 jQuery를에 싫어하지 않는 경우

http://jsfiddle.net/VRNsX/

, 여기에 내가 밖으로 일 또 다른 방법입니다 :

$('#tbl').scroll(function(e) { 
    var self = this; 
    $('.headcol').each(function() { 
     $(this).css({ 
      'top': ($(this).index('.headcol') * $(this).outerHeight() + 3) - $(self).scrollTop() 
     }); 
    }); 
});

http://jsfiddle.net/YMvk9/786/

출처

2012-11-23 16:49:29

가로 스크롤 막대 두 개? Naaah ... –

@RobertKoritnik 어때 이런 식으로 : http://jsfiddle.net/YMvk9/785/ –

@ Asad, 내가 스크롤 할 때 잘 작동하지만 어떻게 처음부터 고정 된 열을 숨길 수 있습니다. 모든 9 개의 행을 보여 주시겠습니까? –

HTML 테이블 컬럼

답변

관련 문제