Scrollable HTML Table with fixed header and fixed column

Question

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.

score 4 · Answer 1 · answered Jan 30 '13 at 15:46

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

answered Jan 30 '13 at 15:46

Greg Detre

653
1
5
9

Wow! I was looking for this stuff but did not realize it was on the 'Extra' section of the Datatables.net website! – 321X May 23 '13 at 12:37
1

that link is broken, it's now at https://www.datatables.net/extensions/fixedheader/ – samson May 27 '15 at 15:13

John · Accepted Answer · 2011-12-28T19:13:47.067

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>

how can we adjust the width for q3 dynamically based on the content as opposed to setting this to 50px? — dotnetcoder, Aug 24 '13 at 23:49

score 1 · Answer 3 · answered Dec 23 '11 at 20:18

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

answered Dec 23 '11 at 20:18

Eugen Rieck

64,175
10
70
92

Scrollable HTML Table with fixed header and fixed column

3 Answers3

Linked