Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I need to freze several rows on the top and several columns on the left of a huge table. Can this be done with pure CSS (and retaining a single large table), or must I split the table into three tables and use JavaScript to keep them in sync? Luckily all the cells have fixed width/height and I don’t need to accommodate flexible cells.
Oh, as for browser support – IE7+ must be supported; preferably IE6 too (not sure if I’ll need it or not); the others can be the latest version.
Here is an incomplete, kludgy solution that solves the column problem. But I thought someone may find it valuable. Several people have pointed out that “thead” might work for the headers, but no one has offered a solution on the columns:
http://jsfiddle.net/C8Dtf/20/
It works by one div to handle horizontal and another to handle vertical scrolling. The main problem is you can’t see the horizontal scrollbar until navigating to the bottom (but mouse wheel scrolling works just fine). It works in IE7 and I used some display:inline hacks to pull that off. Note: I am only using javascript to create the tables.
My intuition after struggling with this for a bit is that there is no pure CSS solution. I simply can’t imagine a way to sync scrolling in both directions.