具有固定標題和第一列的垂直表行

Question

我目前正在嘗試創建一個表格，其中第一行固定，左第一行固定。

對於傳統表，有很多解決方案，但是由於要注入數據的方式，該表必須以垂直堆疊的行進行布局。 表列（垂直行）也必須能夠使父級溢出並滾動。

至少我希望固定最左邊的列，標題（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/