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

我正在嘗試創建一個具有固定第一行頂部和固定第一列左側的表格。具有固定標題和第一列的垂直表格行

對於傳統表格，有很多解決方案，但是由於數據將被注入的方式，此表格必須用垂直堆疊的行進行佈置。表列（垂直行）也必須能夠溢出父項並滾動。

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

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

回答

相關問題