修復前3個動態列

Question

我有一個帶有行標題的表。我想在水平滾動時修復前3列。這張桌子裏有近25列。

 <table cellspacing="0" class="data border" id="question_grid" style="width:110%"> 
      <thead> 
       <tr class="headings"> 
        <th>Heading 1</th> 
        <th>Heading 2</th> 
        <th>Heading 3</th> 
        <th>Heading 4</th> 
        <th>Heading 5</th> 
       </tr> 
       <tr class="filter"> 
        <th>Filter 1</th> 
        <th>Filter 2</th> 
        <th>Filter 3</th> 
        <th>Filter 4</th> 
        <th>Filter 5</th> 
       </tr> 
      </thead> 
      <tbody id="trgrid"> 
       <tr id="grid_menu_2"> 
        <td>Data 1</td> 
        <td>Data 2</td> 
        <td>Data 3</td> 
        <td>Data 4</td> 
        <td>Data 5</td>     
       </tr> 
      </tbody> 
    </table> 

我試過使用CSS，但我對設計知之甚少。我將position:fixed添加到標題，過濾器和數據行的第一個孩子。 數據行將是多個。我正在使用for循環來添加這些行。

.headings th:first-child 
{ 
    position: fixed; 
    left: 5px; 
    right:20px; 
} 

.filter th:first-child 
{ 
    position: fixed; 
    left: 5px; 
    right:20px;  
} 

.main_data_first 
{ 
    position: fixed; 
    left: 5px; 
    right:20px;  
} 

Answer 1

找到解決方案http://datatables.net/它使用jQuery。