创建表头的双向固定滚动 [英] Creating two-way fixed scrolling of table headers

问题描述

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

I have a huge table containing data in vertical and horizontal directions...

像这样: jsfiddle

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

I am hoping to make the far left column and the top row fixed in a way that when I am scrolling in both directions, I am able to keep the these two (column and row) in place. But only move the content.

如何使用JS/CSS做到这一点?

How to achieve this with JS/CSS?

我猜想纯css解决方案是行不通的，因为有双向滚动.

I am guessing a pure css solution won't do it, since there is a two-way scroll.

someclass { position: fixed } 

推荐答案

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

The entire code required to answer your question is too large to include here. Instead, I'll link you to the JSBin which holds the answer, and just include the styling and javascript.

警告是:

• 如果您不愿意使用表而不是使用divs来显示数据，那么格式化我给您的答案的时间将会很糟糕，尤其是当单元格中的数据宽度和高度变化时.
  • 要完成此操作，必须遍历每一行和每一列的标题，然后将其各自的宽度和高度设置为它们的宽度/高度与表中行的宽度/高度之间的最大值.不能自动将其宽度和高度分别设置到表中其余单元格的原因是，设置它们的position: fixed样式属性后，您基本上将它们从表中分离了出来.
    • 因此，如果有能力，请考虑使用div代替，并将行标题拆分为单独的div，您可以position: fixed并模拟列标题的当前行为./li>
    • 另一个好处是您可以提高性能，因为jQuery不会在每次滚动时都遍历每一行来调整行标题.
    • If you are dead set on using tables instead of divs to display your data, then you're going to have a bad time formatting the answer I gave you, especially if the data in the cells are varying widths and heights.
      • In order to accomplish this, you must go through each row and column header, then set their respective widths and heights to the max between their widths/heights and the widths/height of the rows in the table. The reason why their widths and heights aren't automatically set respective to the rest of the cells in the table is because upon setting their position: fixed style attribute, you basically break them out of the table.
        • So, if you have the power, consider using divs instead and breaking the row headers out into a separate div you can position: fixed and emulate the current behavior of the column headers.
        • Another bonus is that you will have a performance increase because jQuery will not be iterating through every row to adjust the row headers every time you scroll.

        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 的链接.

        这篇关于创建表头的双向固定滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！