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

我正在尝试创建一个具有固定第一行顶部和固定第一列左侧的表格。具有固定标题和第一列的垂直表格行

对于传统表格，有很多解决方案，但是由于数据将被注入的方式，此表格必须用垂直堆叠的行进行布置。表列（垂直行）也必须能够溢出父项并滚动。

至少我想固定最左侧的列，头（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

但我无法得到它的垂直行工作。

任何帮助非常感谢。

来源

2014-10-08 Akusaka

该演示给你源使用。 – Andrew 2014-10-08 11:01:59

试试这个http://jsfiddle.net/api/post/library/pure/ – Aru 2014-10-08 11:02:22

看看这个：看来是否适合你的需求？ http://jsfiddle.net/emn13/YMvk9/ – 2014-10-08 11:03:44

如果您将最左列中的单元格设置为“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/

来源

2017-12-08 21:44:17

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

回答

相关问题