Вертикальные строки таблицы с фиксированным заголовком и первым столбцом

Question

В настоящее время я пытаюсь создать таблицу с фиксированной 1-й верхней строкой и фиксированным 1-м левым столбцом.

Существует множество решений для традиционной таблицы, но эта таблица должна быть выстроена вертикально сложными рядами из-за способа ввода данных. Столбцы таблицы (вертикальные строки) также должны иметь возможность переполнять родительский элемент и прокручивать.

Как минимум, я бы хотел, чтобы крайний левый столбец был зафиксирован, заголовок (Loc 1, 2, 3) и т. Д. Был бы приятным. Я пробовал это с позиции: абсолютный, но это, похоже, не работает.

<div style="postion:relative;"> 
<div class="table-responsive top-margin "> 
    <table class="table table-striped table-hover"> 
     <tr class="heads-col"> 
      <th>Data Decriptors</th> 
      <th>Data Description 1</th> 
      <th>Data Description 2</th> 
      <th>Data Description 3</th> 
      <th>Data Description 4</th> 
      <th>Data Description 5</th> 
      <th>Data Description 6</th> 
      <th>Data Description 7</th> 
      <th>Data Description 8</th> 
      <th>Data Description 9</th> 
      <th>Data Description 10</th> 
      <th>Data Description 11</th> 
      <th>Data Description 12</th> 
     </tr> 
     <tr> 
      <th>Location 1</th> 
      <td>Entry First Line 1</td> 
      <td>Entry First Line 2</td> 
      <td>Entry First Line 3</td> 
      <td>Entry First Line 4</td> 
      <td>Entry First Line 1</td> 
      <td>Entry First Line 2</td> 
      <td>Entry First Line 3</td> 
      <td>Entry First Line 4</td> 
      <td>Entry First Line 1</td> 
      <td>Entry First Line 2</td> 
      <td>Entry First Line 3</td> 
      <td>Entry First Line 4</td> 
     </tr> 
    </table> 
    </div> 
</div> 

http://jsfiddle.net/1xzb0x3s/3/

Это решение было в значительной степени совершенства: http://www.matts411.com/static/demos/grid/index.html

Но я не мог заставить его работать с вертикальными рядами.

Любая помощь очень ценится.

Answer 1

Если вы установите ячейки в крайнем левом столбце на «position: relative», а затем обновите style.left с положением прокрутки контейнера, это сделает трюк. Я добавил класс «fixed-row» и некоторые JS, здесь также есть скрипка.

var container = window.document.getElementById("container"); 
container.addEventListener("scroll", function(){ 
var rowHeader = window.document.getElementsByClassName("fixed-row"); 
    for(var i=0; i<rowHeader.length; i++) { 
     rowHeader[i].style.left = (container.scrollLeft + "px"); 
    } 
}, false); 

https://jsfiddle.net/jchaplin2/ftt64fxk/