javascript - 创建表格标题的双向固定滚动

Question

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

像这样:jsfiddle

我希望固定最左边的列和最上面的行，这样当我在两个方向上滚动时，我能够将这两个(列和行)保持在原位。但只移动内容。

如何用 JS/CSS 实现？

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

someclass { position: fixed } 

Answer 1

回答您的问题所需的全部代码太大，无法包含在此处。相反，我会将您链接到 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 的链接.