具有固定标题和第一列的垂直表格行答案

【问题标题】：Vertical table rows with fixed header and first column具有固定标题和第一列的垂直表格行
【发布时间】：2018-07-25 16:22:30
【问题描述】：

我目前正在尝试创建一个具有固定第一顶行和固定第一左列的表格。

对于传统表格有很多解决方案，但由于数据注入的方式，该表格必须垂直堆叠行布局。表格列（垂直行）也必须能够溢出父级并滚动。

至少我希望最左边的列固定，标题 (Loc 1, 2, 3 ) 等将是一个不错的选择。我已经用 position:absolute 试过了，但这似乎不起作用。

<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

但我无法让它与垂直行一起使用。

非常感谢任何帮助。

【问题讨论】：

该演示为您提供了使用源代码。
试试这个jsfiddle.net/api/post/library/pure
看看这个：似乎适合您的需要？ jsfiddle.net/emn13/YMvk9
或this 几乎有效
MrCoder - 我看过这些，但它让它们与垂直行一起工作，这导致了我的问题。我需要标题和在代码和渲染表中相互堆叠。

标签： javascript css html-table

【解决方案1】：

如果您将最左侧列中的单元格设置为“position:relative”，然后使用容器的滚动位置更新 style.left，它就可以解决问题。我添加了“固定行”类和一些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/

【讨论】：