테이블러 플러그인 적용시 헤더가 엉망입니다

Question

jQuery에서 테이블 분류기 플러그인을 사용하여 위젯 스크롤러와 위젯 열 선택기를 적용했습니다.

누구의 사진을 좋아할만한 경험이 있습니까? 내 테이블 헤더가 열과 일치하지 않고 어지럽게 흩어지는 것처럼 보입니다. 최신 버전을 사용하고 theme.blue을 사용하고 있습니다. 내가 여기서 뭔가를 놓친거야? 나는 많이 봤지만 여전히 내 문제를 해결하지 못했습니다.

이 도와주세요. 모든 답변을 주시면 감사하겠습니다.

$.ajax({ 
      type:"POST", 
      url:"../cdc/load/jsonTrack.php?", 
      data:dataString, 
      dataType: 'json', 
      success: function(data){ 
       if(data.status === "success") { 
        var elements = data.elements; 
        if(elements.length === 0) { 
         $('#cdcTracking-list tbody').append('<tr>' + 
          '<td colspan="7">No session to display</td>' + 
          '</tr>'); 
        } 
        for(var i = 0; i < elements.length; i++){ 
         var element = elements[i]; 

         //console.log('session id:' + element.vesselCode); 
         $('#cdcTracking-list tbody').append('<tr>' + 
          '<td style="color: green;">' + element.vesselCode + '</td>' + 
          '<td style="color: black;">' + element.voyage + '</td>' + 
          '<td style="color: black;">' + element.chasisNo + '</td>' + 
          '<td style="color: blue;">' + element.plateNo + '</td>' + 
          '<td style="color: blue;">' + element.bookingRef + '</td>' + 
          '<td style="color: blue;">' + element.serviceTerm +'</td>'+ 
          '</tr>'          
         ); 
        } 
       }else { 
        $('#cdcTracking-list tbody').append('<tr><td colspan="7">No session to display</td></tr>'); 
       } 
      } 
     }); 

HTML 헤더 :

[업데이트] 이 테이블을 생성하는 내 코드입니다

   <table id="cdcTracking-list" class="tablesorter-blue custom-popup" border="0" data-mode="columntoggle"> 
        <thead> 
         <tr> 
          <th align="center">Vessel </th> 
          <th align="center">Voyage </th> 
          <th align="center">Chasis No</th> 
          <th align="center">Plate</th> 
          <th align="center" >Booking Ref</th> 
          <th align="center" >Service Term</th> 
         </tr> 
        </thead> 
        <tbody> 

        </tbody> 
       </table> 

을이 자바 스크립트 tablesorter에 있습니다 : 샘플에

$("#cdcTracking-list").tablesorter({ 
        widthFixed: false, 
        showProcessing: true, 
        headerTemplate: '{content} {icon}', 
        widgets: ['zebra', 'scroller', 'columnSelector'], 
        widgetOptions: { 
         columnSelector_container: $('#columnSelector'), 
         columnSelector_columns: { 
          0: ['disable'] /* set to disabled; not allowed to unselect it */ 
         }, 
         columnSelector_saveColumns: true, 
         columnSelector_layout: '<label><input type="checkbox">{name}</label>', 
         columnSelector_name: 'data-selector-name', 
         columnSelector_mediaquery: true, 
         columnSelector_mediaqueryName: 'Auto: ', 
         columnSelector_mediaqueryState: true, 
         columnSelector_breakpoints: ['20em', '30em', '40em', '50em', '60em', '70em'], 
         columnSelector_priority: 'data-priority', 
         scroller_height: 300, 
         scroller_barWidth: 18, 
         scroller_upAfterSort: true, 
         scroller_jumpToHeader: true, 
         scroller_idPrefix: 's_' 
        } 
       }).tablesorterPager(pagerOptions); 

Answer 1

여기 : http://mottie.github.io/tablesorter/docs/example-widget-scroller.html jQuery의 버전이 1.4.4 인 것처럼 보입니다. 도움이되는지 확인하기 위해 해당 버전을로드 해보십시오. 나는 그 버전과 열을 정렬하려했지만 다른 코드를 깨뜨 렸기 때문에 최신 jQuery로 돌아갔다. 나에게 효과가있는 것은 고정 된 열 너비를 없애고 머리글에 다음과 같이 백분율을 사용하는 것입니다. 첫 번째 열에 대해서는 <th style="width:10%">, 나머지는 괜찮은 것처럼 보였습니다.