Home/ Questions/Q 6986101
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T18:45:57+00:00

I would like to create a table with scrollable data. I have to freeze

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0