水平滾動表：多個固定列

Question

我試圖做一個水平滾動表，我能夠做到，但只有第一列是固定的。我需要修改兩列或更多列的滾動表格。

這裏是我想使這個表滾動兩個或2個以上的列是固定的，其餘的滾動小提琴here

的鏈接。是否有可能創建一個CSS類（例如「fixedColumn」），以便具有此CSS類的任何列都是固定的，而其餘列是滾動的？我無法使用任何JavaScript插件（根本沒有JS）。

請幫忙。

HTML

<div class="table-wrapper"> 
    <table id="consumption-data" class="data"> 
     <thead class="header"> 
      <tr> 
       <th>Month</th> 
       <th>Item 1</th> 
       <th>Item 2</th> 
       <th>Item 3</th> 
       <th>Item 4</th> 
      </tr> 
     </thead> 
     <tbody class="results"> 
      <tr> 
       <th>Jan</th> 
       <td>3163</td> 
       <td>3163</td> 
       <td>3163</td> 
      <td>3163</td> 
     </tr> 
     <tr> 
      <th>Feb</th> 
      <td>3163</td> 
      <td>3163</td> 
      <td>3163</td> 
      <td>3163</td> 
     </tr> 
     <tr> 
      <th>Mar</th> 
      <td>3163</td> 
      <td>3163</td> 
      <td>3163</td> 
      <td>3163</td> 
     </tr> 
     <tr> 
      <th>Apr</th> 
      <td>3163</td> 
      <td>3163</td> 
      <td>3163</td> 
      <td>3163</td> 
     </tr> 
     <tr>  
      <th>May</th> 
      <td>3163</td> 
      <td>3163</td> 
      <td>3163</td> 
      <td>3163</td> 
     </tr> 
     <tr> 
      <th>Jun</th> 
      <td>3163</td> 
      <td>3163</td> 
      <td>3163</td> 
      <td>3163</td> 
     </tr> 

     <tr> 
      <th>...</th> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
     </tr> 
    </tbody> 
</table> 

CSS

.table-wrapper { 
    overflow-x:scroll; 
    overflow-y:visible; 
    width:250px; 
    margin-left: 120px; 

}

td, th { 
    padding: 5px 20px; 
    width: 100px; 
} 

th:first-child { 
    position: absolute; 
    left: 5px; 
} 

Answer 1

只要你的表中有一個固定的寬度，你可以做這樣的事情：

td:nth-child(3) { 
    position: fixed; 
    left: 160px; 
    width:100px; 
} 

當然

你需要調整兩個left和width性質，並根據你想要的列中的第n個孩子保持固定的位置，但你會明白。這就是說，我會嘗試使用div而不是表格，它對於像這樣的實例更容易管理