2

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

Like this: 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.

How to achieve this with JS/CSS?

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

someclass { position: fixed }
Capuchin
  • 3,465
  • 6
  • 28
  • 40
  • Won't that cause the headers to no longer be accurate? If you scroll one column to the right, the headers will stay in place and the content to move one column to the left, causing the second content column to be under the first header column. – TreeTree Nov 05 '13 at 15:28
  • If I am thinking correct, the top row should be fixed vertically and static horizontally. Left column should be fixed horizontally and static vertically. (?) – Capuchin Nov 05 '13 at 15:31
  • This may be of interest to you. http://stackoverflow.com/questions/11891065/css-only-scrollable-table-with-fixed-headers – TreeTree Nov 05 '13 at 15:34
  • @TreeTree thank you there is some code that is reusable I think. I am not a JS guru though. – Capuchin Nov 05 '13 at 15:37
  • Look at the first answer, it has no javascript at all. – TreeTree Nov 05 '13 at 15:43
  • What I am searching for is on the actual question on that thread. But this should be working both horizontally and vertically. The key thing is when content is too wide to be shown on one screen, then the matching column/row should always stay on the right spot. In a nutshell: Keep the headers always on right spot even when you scroll in any direction. – Capuchin Nov 05 '13 at 15:51

1 Answers1

3

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.

The caveats are:

  • 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.
  • You must use 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);
        }
      });
    });
  });
});

Again, here is the link to the JSBin.

Jared Gotte
  • 452
  • 3
  • 13