JQuery 여러 플러그인 후 너비를 변경

Question

this plugin을 사용하여 테이블 내에서 스크롤 가능 tbody 테이블을 만들려고합니다. jquery 또는 순수 CSS 스크롤 가능 tbody 요소에 대해서는 많은 질문이 있지만 내 것과 관련없는 것은 없습니다.

문제는 필자가 필터에 헤더 행을 추가하는 jQuery tablefilter 플러그인을 사용한다는 것입니다. tablescroll 플러그인을로드하면 테이블 차원이 무시되고 더 이상 내 머리글이 일치하지 않습니다.

열은 가변 폭이며 tablescroll 플러그인은 부적절한 정렬을 유발하는 동일한 길이라고 가정합니다.

내가 수동으로 여기에 자바 스크립트 를 사용하여 재설정 시도 :

var $table = $(".tablescroll"), 
$cols = $(".tablescroll tr td").slice(0,5), 
$th = $(".fixedHeader tr th"); 
$table.tableScroll(); 
$filter = $(".filterRow th"); 
$.each($th, function(index, value){ 
     $th[index].style.width = $cols[index]['clientWidth']; 
     $filter[index].style.width = $cols[index]['clientWidth']; 
}); 

및 각 th에 올바른 스타일 속성을 추가하지만 헤더는 같은 잘못된 정렬을 유지한다. 이것은 VERY LAST javascript가 페이지에로드되어 있습니다.

여기 내 HTML입니다 :

<form> 
<table class="tablescroll"> 
      <thead class="fixedHeader"> 
      <tr> 
       <th>Name</th> 
       <th>Description</th> 
       <th>Site</th> 
       <th>Created Date</th> 
       <th>Modified Date</th> 
      </tr> 
     </thead> 
        <tbody> 
      <tr> 
       <td>Test Name</td> 
       <td>Test Description</td> 
       <td>Test Site</td> 
       <td>2013-12-18 15:20:05</td> 
       <td>2014-01-29 19:36:09</td> 
      </tr> 
        </tbody> 
    </table> 

</form> 

내 자바 스크립트 호출이 스타일을 추가하지만 모양에 대해 아무것도 변경하지 왜 궁금 내가이 플러그인을 계속하거나하는 경우는 단순히 순수 CSS의 솔루션을 작동 .

미리 감사드립니다.

Answer 1

는 플러그인이 헤더를 제거하고 그들을 위해 새로운 테이블을 생성했다. 이것은 행동을 일으킨 특정 테이블의 헤더 클래스를 참조하는 모든 CSS와 js를 제거했습니다.

필자의 솔루션에는 표 전체에서 작동하지 않는 정렬 및 필터링 기능으로 인해 순수 CSS 버전이 필요합니다.

Answer 2

Javascript를 사용하는 대신 표의 인라인 스타일을 설정해 보았습니까?

<table style="width:##px;"> 

또는 헤더 열의

직접 @ jkgm777처럼

<tr><th style="width:##px;"></th></tr>