자바 스크립트는 수정 표 헤더

Question

내가 여기에 테이블의 헤더를 수정하는 데 문제가 있어요 내 문제입니다 :

내가이 게시물에서 동일한 코드를 사용 : Table header to stay fixed at the top when user scrolls it out of view with jQuery

그것은 거의 작동하고 있지만, 문제는 아래로 스크롤 할 때 변경된 헤더의 너비입니다.

내가 뭘 잘못하고 있는지 궁금해. 너비를 수정하려면 다음 코드를 시도했지만 작동하지 않습니다. 테이블 셀들의 너비를 특정 테이블 셀의 내용뿐만 아니라, 그와 같은 수직 칼럼 내의 다른 셀들뿐 아니라 결정된다 http://vvb.me/test.html

Answer 1

: 여기

$("#header-fixed td").each(function(index){ 
var index2 = index; 
$(this).width(function(index2){ 
    return $("#table-1 td").eq(index).width(); 
}); 
}); 

링크이다. 이것은 표가 블록을 형성하여 열 너비가 정렬되어야하기 때문입니다.

여기에서 발생한 문제는 연결된 thead 셀의 계산 된 너비가 분리 된 고정 된 thead 셀의 너비와 다른 것입니다.

첨부 된 thead에서 셀의 너비는 크게 아래 데이터로 결정됩니다. 두 번째 인스턴스 (tbody에 첨부되지 않음)는 너비가 헤더 td에 의해서만 결정됩니다.

두 솔루션 모두 theads에 셀의 너비를 지정하는 것이 해결책입니다. 예를 들어, 그들이 동일 할 것, 당신의 thead 모든 셀에

<td style='...; width: 50px;'> 

를 지정.

자바 스크립트를 사용하여 연결된 각 thead 셀의 너비를 확인하고 하단 thead 셀을 해당 셀과 동일하게 설정할 수도 있습니다. DOM 요소의 크기 계산은 Javascript/Jquery를 사용하여 수행 할 수 있습니다. 방법을 알려면 대답 방법 like this one을 확인하십시오.