javascript - 滚动时如何锁定 table的第一行和第一列,可能使用javascript和 CSS?

如何创建一个第一行和第一列的表,就像在Excel中激活'冻结窗格'时一样? 我需要水平和垂直地滚动(有许多解决现成的方案,但是只允许垂直滚动)。

我确定这对于CSS是不可能的,但是有没有人知道javascript解决方案? 它需要在所有主流浏览器中工作。

提前致谢!

时间:

这个插件可以将格式良好的HTML表格转换为带有固定表格标题和列的可滚动表格。

使用的方式如下


$('#myTable').fxdHdrCol({
 fixedCols : 3, /* 3 fixed columns */
 width :"100%", /* set the width of the container (fixed or percentage)*/
 height : 500 /* set the height of the container */
});

你可以查看演示和文档

你需要两个表格,第一个表格在第二个表格上精确覆盖。 第二个包含所有数据,其中第一个只包含第一列。 你必须同步它的宽度,取决于它的内容,它的高度是行。

除了这两张表格之外,你还需要第三个。 这是第一行,它正好位于其他两个行之间,必须以相同的方式进行同步。

在这里你需要绝对定位。 接下来,将数据 table的滚动与head行和第一列 table的滚动位置同步。

在所有主要浏览器中都能很好地工作,除了一个问题: 同步滚动将抖动。 要解决这个问题,你需要两个 outher div容器,它们包含标题行和第一列内容的克隆。 垂直滚动时,显示标题行克隆以防止晃动,同时在背景中重新定位原始位置。 水平滚动时,你将显示第一行克隆。 同样的东西。

我已经在这里发布了jQuery插件解决方案: http://stackoverflow.com/questions/486576/frozen-table-header-inside-scrollable-div/1533619#1533619

它是你想要的,而且非常轻量级而且易于使用。

今天有很多跨浏览器解决方案,其中包括SuperTable,我喜欢它的优雅和简单性(现在MooGrid继续使用)和slickGrid的出色功能。

我是用下面的方法来做的:

  • 使用多个表
  • 固定大小单元格
  • jQuery的scrollTop和scrollLeft函数

这里有一个jsfiddle例子演示。

我还没有在所有浏览器上测试过,但是我想它对老版本是不合适的。

JQUERY


$("#clscroll-content").scroll(function() {
 $("#clscroll-row-headers").scrollTop($("#clscroll-content").scrollTop());
 $("#clscroll-column-headers").scrollLeft($("#clscroll-content").scrollLeft());
});

$("#clscroll-column-headers").scroll(function() {
 $("#clscroll-content").scrollLeft($("#clscroll-column-headers").scrollLeft());
});

$("#clscroll-row-headers").scroll(function() {
 $("#clscroll-content").scrollTop($("#clscroll-row-headers").scrollTop());
});

HTML


<div class="clscroll corner-header">
 <table>
 <tr>
 <th>&nbsp;</th>
 </tr>
 </table>
</div>
<div class="clscroll column-headers" id="clscroll-column-headers">
 <table>
 <tr>
 <th>Bus</th>
 <th>Plane</th>
 <th>Boat</th>
 <th>Bicycle</th>
 </tr>
 </table>
</div>
<div class="clscroll row-headers" id="clscroll-row-headers">
 <table>
 <tr>
 <th>Red</th>
 </tr>
 <tr>
 <th>Green</th>
 </tr>
 <tr>
 <th>Blue</th>
 </tr>
 <tr>
 <th>Orange</th>
 </tr>
 <tr>
 <th>Purple</th>
 </tr>
 <tr>
 <th>Yellow</th>
 </tr>
 <tr>
 <th>Pink</th>
 </tr>
 <tr>
 <th>Brown</th>
 </tr>
 </table>
</div>
<div class="clscroll table-content" id="clscroll-content">
 <table>
 <tr>
 <td>Red Bus</td>
 <td>Red Plane</td>
 <td>Red Boat</td>
 <td>Red Bicycle</td>
 </tr>
 <tr>
 <td>Green Bus</td>
 <td>Green Plane</td>
 <td>Green Boat</td>
 <td>Green Bicycle</td>
 </tr>
 <tr>
 <td>Blue Bus</td>
 <td>Blue Plane</td>
 <td>Blue Boat</td>
 <td>Blue Bicycle</td>
 </tr>
 <tr>
 <td>Orange Bus</td>
 <td>Orange Plane</td>
 <td>Orange Boat</td>
 <td>Orange Bicycle</td>
 </tr>
 <tr>
 <td>Purple Bus</td>
 <td>Purple Plane</td>
 <td>Purple Boat</td>
 <td>Purple Bicycle</td>
 </tr>
 <tr>
 <td>Yellow Bus</td>
 <td>Yellow Plane</td>
 <td>Yellow Boat</td>
 <td>Yellow Bicycle</td>
 </tr>
 <tr>
 <td>Pink Bus</td>
 <td>Pink Plane</td>
 <td>Pink Boat</td>
 <td>Pink Bicycle</td>
 </tr>
 <tr>
 <td>Brown Bus</td>
 <td>Brown Plane</td>
 <td>Brown Boat</td>
 <td>Brown Bicycle</td>
 </tr>
 </table>
</div>

CSS


.clscroll table {
 table-layout: fixed;
}

.clscroll td, .clscroll th { 
 overflow: hidden;
}

.corner-header {
 float: left;
}

.column-headers {
 float: left;
 overflow: scroll;
}

.row-headers {
 clear: both;
 float: left; 
 overflow: scroll;
}

.table-content {
 table-layout: fixed;
 float: left;
 overflow: scroll;
}

.clscroll td, .clscroll th { 
 width: 200px;
 border: 1px solid black;
}

.row-headers, .table-content {
 height: 100px;
}

.column-headers, .table-content, .table-content table, .column-headers table {
 width: 400px;
}

Sort and Lock Table 是我看到的唯一的一个能在大部分浏览器上工作的解决方案,(尽管这个"locked column css"也可以做同样的事情)

你必须测试它,但是如果你在页面中嵌入一个 iframe,然后使用CSS绝对定位 1行的&列,这将会解决你的问题?

如何解决,你把实际"数据"table 内部自己的div, overflow: scroll;? 然后浏览器将自动创建滚动条的部分"table"你不想锁,和你可以把"table 头"/第一行 <div> 上方。

不确定水平滚动时如何操作。

这是第一列锁定的工作例子,但是它与Firefox浏览器不兼容,我没有做很多检查,但是它似乎只在IE上工作,作者提供了一些注释,你可以阅读。

锁定第一列:http://home.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

...