0

I have a large table inside a scrollable div. The table contains a person's name, followed by his details. I need the first column of the table to stay fixed while scrolling horizontally, so that the person's name stays visible while look at his details. Similar to this: HTML table with horizontal scrolling (first column fixed)

However, my table is also very large in the y direction, so when I scroll down, the person's name should also scroll up with his details. This almost solves my problem, but not the vertical scrolling.

Please help!

Community
  • 1
  • 1
user1742188
  • 4,563
  • 8
  • 35
  • 60

2 Answers2

1

I was trying to solve fixed column issue where a table is inside other DIV control. While solving that, I faced the same issue and found solution via setting up container at ScrollTop property on event of "onscroll". I applied below style to the container:

.floatingStyle
{
   position:relative;
   background-color:#829DC0;
   top:0px;
}

You can look complete solution here: http://rajputyh.blogspot.in/2011/12/floatingfixed-table-header-in-html-page.html There are few browser related issues which are also handled there.

Yogee
  • 1,412
  • 14
  • 22
0

For vertical scrolling the problem is keeping the headers and footer fixed. The best way to do this is to actually have three tables - one for headers, one for the data (in a scrollable DIV) and one for the footer. If the table column widths are fixed then that's all you need to do. If they aren't then you'll need to use JavaScript to adjust them. But there is a trick here - a table with AUTO column widths can't be guaranteed to use widths that you specify in JS, especially if a column is empty, or a header text item is quite long.

I've handled this by setting the headers width based on the data, finding if the browser resized and then changing the data widths. Once they are close I then set the table to FIXED mode for the final adjustment.

Have a look here:

http://hifi.goneill.co.nz/cd.php

Click on Jazz, Classical buttons etc to see the tables. Also read the technical notes page as it describes the coding and try out the Ajax version too.

For your fixed column you could do something similar: have two tables and use the offsetTop of one to set the scrollTop of the other. See how my table sets the top line when you sort on a column with empty rows, or saves and restores the current row in the Ajax version when swapping between tabs.

goneill
  • 64
  • 1
  • 2