jQuery – Freeze HTML table header and the left columns

A few months ago, i am working on a website project which contains a very wide HTML table. The client wants to keep the top row and the two columns on the left hand side of the table sticky. There is no proper way to do it but and the only solution i could found is using a jQuery library written by Conan Albrecht. The original post could be found in the link below but the source link is no longer valid.
A JQuery Plugin For Freezing Table Rows/Columns

Luckily i have a copy of the lib and you can download here.

Try the following piece of HTML code and see how it works.

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8" />
  <style type="text/css">
    body {
      margin: 0px auto;
      width: 800px;
    }
    #freeze-table {
      width: 1200px;
    }
    th {
      background-color: grey;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="jquery.freezetablecolumns.1.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $('#freeze-table').freezeTableColumns({
        width:       800,   // required
        height:      500,   // required
        numFrozen:   2,     // optional
        frozenWidth: 160,   // optional
        clearWidths: true,  // optional
      });
    });
  </script>
  </head>
  <body>
    <table id="freeze-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Location</th>
          <th>Registration Date</th>
          <th>Occupation</th>
          <th>Profession</th>
          <th>Registration Date</th>
          <th>Occupation</th>
          <th>Profession</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Kit</td>
          <td>Hong Kong</td>
          <td>2013-04-08</td>
          <td>Freelancer</td>
          <td>Web development</td>
          <td>2013-04-08</td>
          <td>Freelancer</td>
          <td>Web development</td>
        </tr>
        <tr>
          <td>Kit</td>
          <td>Hong Kong</td>
          <td>2013-04-08</td>
          <td>Freelancer</td>
          <td>Web development</td>
          <td>2013-04-08</td>
          <td>Freelancer</td>
          <td>Web development</td>
        </tr>
        <tr>
          <td>Kit</td>
          <td>Hong Kong</td>
          <td>2013-04-08</td>
          <td>Freelancer</td>
          <td>Web development</td>
          <td>2013-04-08</td>
          <td>Freelancer</td>
          <td>Web development</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

The table now has frozen columns and top row.
jquery-freeze-table-columns

Done =)

Advertisements

11 thoughts on “jQuery – Freeze HTML table header and the left columns”

    1. The error message is caused by the trailing comma at the end of the object. It only happens in IE.

      <script type="text/javascript">
        $(document).ready(function(){
          $('#freeze-table').freezeTableColumns({
            width:       800,   // required
            height:      500,   // required
            numFrozen:   2,     // optional
            frozenWidth: 160,   // optional
            clearWidths: true,  // optional
          });
        });
      </script>
      

      Like

    1. My bad, the <th> and <tr> have to be wrapped by <thead> and <tbody>. i have updated the example. try to add more rows and the header row should be sticky.

      Like

    1. in chrome it works fine but in IE this is causing lots of performance issue. i have added the freezing with lots of effort , i dont wann remove it now. please help me how can i improve the performance in IE 9 and above

      Like

      1. It’s a trade off i think, it u need to make things work in ie, u have to pay more effort.

        actually i didn’t write this library, i am sorry that i couldn’t help. =(

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s