2

我有一个巨大的表格，其中包含垂直和水平方向的数据......

像这样：jsfiddle

我希望以某种方式固定最左侧的列和顶行，当我在两个方向滚动时，我能够将这两个（列和行）保持在适当的位置。但只移动内容。

如何使用 JS/CSS 实现这一点？

我猜一个纯 css 解决方案不会这样做，因为有一个双向滚动。

someclass { position: fixed }
4

1 回答 1

3

回答您的问题所需的整个代码太大，无法在此处包含。相反，我会将您链接到包含答案的JSBin，并且只包含样式和 javascript。

警告是：

  • 如果您一心想使用表格而不是 div 来显示数据，那么您将很难格式化我给您的答案，尤其是当单元格中的数据具有不同的宽度和高度时。
    • 为了做到这一点，您必须遍历每一行和每一列的标题，然后将它们各自的宽度和高度设置为它们的宽度/高度与表中行的宽度/高度之间的最大值。它们的宽度和高度没有自动设置为表格中其他单元格的原因是因为在设置它们的position: fixed样式属性时，您基本上会将它们从表格中分离出来。
      • 因此，如果您有能力，请考虑改用 div 并将行标题分成单独的div您可以position: fixed模拟列标题的当前行为。
      • 另一个好处是您将获得性能提升，因为每次滚动时 jQuery 不会遍历每一行来调整行标题。
  • 您必须使用jQuery UI。

HTML：

<!-- Notice I removed background and border color from table tag -->
<table border="0" width="100%" cellpadding="3" cellspacing="1">
  <tr>
    <td>Dead Cell</td><!-- this cell is not shown -->
    ...

CSS：

/* Make white space above table since we broke the column headers out of the table */
table {
  margin-top: 51px;
  position: relative;
}
table td {
  border: 1px solid #FFCC00;
  height: 44px;
  background-color: #FFFFCC;
}
/* styling for column headers */
table tr:first-child {
  position: fixed;
  top: 0;
  left: 57px;
  z-index: 100;
}
/* remove first cell in top left position */
table tr:first-child td:first-child {
  display: none;
}
table tr:first-child td,
table tr {
  position: relative;
}
table tr:first-child td {
  background: orange;
}
table tr td:first-child {
  background: orange;
  position: fixed;
  width: 39px
}
/* Make white space to the left of table since we broke the row headers out of the table */
table tr:nth-child(n+2) td:nth-child(2) {
  margin-left: 48px;
  display: block;
}

JS：

$(function(){ // When document is loaded and ready
  $(window).scroll(function() { // When we scroll in the window
    // Move column headers into place
    $('table tr:first-child td').css('left', - $(this).scrollLeft());
    // Move row headers into place
    $('table tr td:first-child').each(function() {
      $(this).position({ // jQuery UI overloaded function
        my: "left top",
        at: "left top",
        of: $(this).parent(),
        using: function(pos) {
          $(this).css('top', pos.top);
        }
      });
    });
  });
});

同样，这里是JSBin的链接。

于 2013-11-05T20:02:32.710 回答