5

I would like to create a table with scrollable data. I have to freeze the first row and first column of the table. The first row and first column of the table must automatically resize in width and height to the variable cell dimensions in the content area of the table (because the user will be adding new table cells with variable amount of content).

Someone asked a related question: How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?

But the link to online demo and source code is dead, so I am unable to confirm the solution.

Improve this question

3 Answers 3

Reset to default
4

Use the excellent jQuery Datables with the FixedHeader extension.

Scroll down past the header row, and you'll see it glue itself neatly to the top of your screen.

For header, footer, left and right excitement:

http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Wow! I was looking for this stuff but did not realize it was on the 'Extra' section of the Datatables.net website!
that link is broken, it's now at datatables.net/extensions/fixedheader
3

Ok, I read a lot of answers on the web and finally assembled a demo that worked. I'm using PHP to create 50 rows in the table, but you can just as easily hard code the data. I essentially created four quadrants (div.q1, div.q2, div.q3 and div.q4), where the fourth quadrant contains the actual data table. I used jquery to copy the table in the fourth quadrant into the second and third quadrant before synchronizing their scroll bars. I used a combination of CSS overflow, width, height and display properties to hide unnecessary TD elements in each of the quadrants. Here's a full working example:

<html> <head> <style> body {width:350px;} .q1, .q2, .q3, .q4 {overflow:hidden; display:block; float:left;} .q1 {width:50px; height: 30px;} .q2 {width:300px; height: 30px;} .q3 {width:50px; height: 100px;} .q4 {width:300px; height: 100px; overflow:auto;} .q2 .firstCol, .q3 thead, .q4 thead, .q4 .firstCol {display:none;} .q2 td {background-color:#999;} .q3 td {background-color:#999;} .container {width:9999px;} </style> <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script> $(document).ready(function(){ $('.q4').bind('scroll', fnscroll); $('.q2').html($('.q4').html()); $('.q3').html($('.q4').html()); }); function fnscroll(){ $('.q2').scrollLeft($('.q4').scrollLeft()); $('.q3').scrollTop($('.q4').scrollTop()); } </script> </head> <body> <div class="q1"><div class="container"></div></div> <div class="q2"><div class="container"></div></div> <div class="q3"><div class="container"></div></div> <div class="q4"> <div class="container"> <table> <thead> <tr> <td class="firstCol"></td> <td>Col</td> <td>Col</td> <td>Col</td> <td>Col</td> <td>Col</td> <td>Col</td> <td>Col</td> <td>Col</td> </tr> </thead> <tbody> <?php for($c=0; $c<50; $c++) { ?> <tr> <td class="firstCol">Row</td> <td>this is some content</td> <td>hello world!<br/>This is good</td> <td>Row</td> <td>adjfljaf oj eoaifj </td> <td>ajsdlfja oije</td> <td>alsdfjaoj f</td> <td>jadfioj</td> <td>jalsdjf oai</td> </tr> <?php } ?> </tbody> </table> </div> </div> </body> </html>
Improve this answer

1 Comment

how can we adjust the width for q3 dynamically based on the content as opposed to setting this to 50px?
1

You render the table twice:

  • Once contained in a scrollable div of your desired size
  • Once in a small div, non scrollable div (overflow:hidden), that is positioned over the top of the other one, hiding it's top row but not the scroll bar
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.