[英]Vertical table rows with fixed header and first column
我目前正在尝试创建一个表格,其中第一行固定,左第一行固定。
对于传统表,有很多解决方案,但是由于要注入数据的方式,该表必须以垂直堆叠的行进行布局。 表列(垂直行)也必须能够使父级溢出并滚动。
至少我希望固定最左边的列,标题(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
但是我无法将其用于垂直行。
任何帮助,不胜感激。
如果将最左边一列中的单元格设置为“ 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.