горизонтально прокручивающийся стол: несколько фиксированных колонок

Question

Я пытался сделать горизонтально прокручивающийся стол, и я смог его сделать, но только первый столбец исправлен. Мне нужно, чтобы таблица прокрутки для двух или более столбцов была исправлена.

Вот ссылка на скрипку here

Я хочу, чтобы сделать эту таблицу прокрутки для двух или более 2 столбцов фиксированной и остальные прокрутки. Можно ли создать класс 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 свойства, а п-й ребенок в соответствии с колонкой вы хотите держаться в фиксированном положении, но вы получите эту идею. Это, как говорится, я попытаюсь использовать divs вместо таблиц, это гораздо более управляемо для таких случаев, как это