사용하여 머리글과 열을 고정 JQuery와

Question

내 테이블 디자인은 약 100 열이되고 섹션은 내가 고정 된 헤더가하려고하고 일부 열 냉동 4 행

주위에있을 것입니다. CSS 표현식을 사용하여이를 달성 할 수 있습니다.

CSS 표현식은 IE10에서 파괴되고 페이지가 매우 느리게 만드는, 그래서 내가 jQuery를 사용하여 동일한을 달성하기 위해 노력하고 있어요,하지만 난 그것을 내가 대부분을 제거 HTML을 (부착하고

을 달성 할 수 아니다 명확성을 위해) 그리고 CSS. 잠긴 클래스 내가이

$("#main-container").scroll(function() { 
    var xx = document.getElementById("main-container").scrollTop-2;  
    $("#mainTbleHdIdtr").each(function() { 
     $(this).find("th").each(function() { 
      $(this).css({'zIndex':20,"TOP":xx});    
     }); 
    }); 
}); 

같은 것을 수행하여 JQuery와의 잠금을 시뮬레이션하기 위해 노력하고

TABLE#tbl { 
    BORDER-COLLAPSE: collapse; TABLE-LAYOUT: fixed 
} 
THEAD TH { 
    POSITION: relative; 
} 
THEAD TR.nosort TD { 
     POSITION: relative; 
} 
THEAD TH.first{ 

} 
Table#tbl THEAD TD { 
    Z-INDEX: 20; TOP: expression(document.getElementById("main-container").scrollTop-2) 
} 
Table#tbl THEAD TH { 
    Z-INDEX: 20; TOP: expression(document.getElementById("main-container").scrollTop-2) 
} 
Table#tbl THEAD TH.locked { 
    Z-INDEX: 30 
} 
Table#tbl THEAD TD.locked { 
    Z-INDEX: 30 
} 
TD.locked { 
    Z-INDEX: 5; POSITION: relative; LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft) 
} 
TH.locked { 
    Z-INDEX: 5; POSITION: relative; LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft) 
} 
Table#tbl THEAD TH.locked { 
    POSITION: relative; TEXT-ALIGN: center; BACKGROUND-COLOR: #60487A; COLOR: black; CURSOR: default; border-bottom: 1px solid black;border-right: 1px solid black; 
} 
Table#tbl THEAD TD.locked { 
    POSITION: relative; 
} 
Table#tbl TBODY TD.locked { 
    POSITION: relative; TEXT-ALIGN: center; BACKGROUND-COLOR:white; COLOR: black; CURSOR: default; 
    } 

잠금

div id="main-container" style="overflow: scroll; height: 366px; width: 1023">     
    <table id="tbl" style="table-layout: fixed"> 
     <thead id="mainTbleHdId"> 
      <tr> 
       <th class="locked"></th> 
       <th class="locked"></th> 
       <th class="locked">Item Details</th> 
       <th class="locked"></th> 
       <th></th> 
       . 
       . 
       . 
       . 
       <th></th> 
      </tr> 
      <tr class="xxxxx"> 
       <th class="locked">Select Item(s)</th> 
       <th class="locked">Select Decision</th> 
       <th class="locked">Select Select</th>         
       <th class="locked">Select Description</th> 

       . 
       . 
       .    
       <th >Select Prep</th>          
      </tr> 
      <tr>   
       <th id="itemView" class="locked" > 
        <input name="selectAll" id="selectAll" type="checkbox">All</th> 
       <th class="locked"></th> 
       <th class="locked"></th> 
       <th class="locked"></th> 
       . 
       . 
       . 
       . 
       <th ></th> 
      </tr> 
      <tr > 
       <th class="locked"></th> 
       <th class="locked"></th> 
       <th class="locked"></th> 
       <th class="locked"></th> 
       . 
       . 
       . 
       . 
       <th >Select Calc</th> 
      </tr> 
     </thead> 
     <tbody id="mainTbleBoyId">   
      <tr class="Rows"> 
       <td id="singleSelctcheckboxtd0" class="locked"> 
        <input name="Checkbox" type="checkbox"> 
       </td> 
       <td class="locked"> 
        <select name="selectNamebuyerDecision"> 
         <option value="Please Select" name="buyerCheck" selected="selected">Please Select</option>      
        </select> 
       </td> 
       <td class="locked" id="dpcitd0"> 
        <input type="text" value="98070702"> 
       </td> 
       <td class="locked" id="genDesctd0"> 
        <input type="text" value="ATHLETIC"> 
       </td> 
       . 
       . 
       . 
       . 
       <td class="InputType" id="liquidationPreptd0"> 
        <input type="text" value="0"> 
       </td> 
      </tr>    
     </tbody> 
    </table> 
</div> 

CSS를 정의하는 것입니다 그러나 것 나던 일부 플러그인과 데이터 테이블을 사용해 보았습니다. 문제는 그 데이터 테이블이 Fixe를 사용할 때 매우 느리게 만드는 것입니다. 내가의 여분 FixedColumns을 포함 할 때 http://datatables.net/ : D 열

미리 감사가

Answer 1

내가 과거에이 문제를 해결했고,이 도구를 사용하여 그것을 통해 작동 할 수 있었다있다 http://datatables.net/extras/fixedcolumns/

성능이었다 스타일이있는 행과 열 머리글을 사용하여 매우 견고합니다.