Read more

Sticky table header with jQuery

Dominik Schöler
April 29, 2014Software engineer at makandra GmbH

When you want the table headers to always stay around (e.g. because that table is huuuge), use the code below.

Style

table.fixed_table_header{
  position: fixed;
  top: 0;
  width: auto;
  display: none;
  border: none;
  margin: 0;
}

Javascript

;(function($) {
   $.fn.fixHeader = function() {
      return this.each(function() {
         var $table = $(this),
            $t_fixed;

         function init() {
            $t_fixed = $table.clone();
            $t_fixed.find('tbody').remove().end().addClass('fixed_table_header').insertBefore($table);
            resizeFixed();
         }

         function resizeFixed() {
            $t_fixed.find("th").each(function(index) {
               $(this).css("min-width",$table.find("th").eq(index).width()+"px");
            });
         }

         function scrollFixed() {
            var offset = $(this).scrollTop(),
            tableOffsetTop = $table.offset().top,
            tableOffsetBottom = tableOffsetTop + $table.height() - $table.find("thead").height();
            if(offset < tableOffsetTop || offset > tableOffsetBottom)
               $t_fixed.hide();
            else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
               $t_fixed.show();

            // left-align $t_fixed with $table
            $t_fixed.css("left", $table.offset().left - $(this).scrollLeft());
         }

         $(window).resize(resizeFixed);
         $(window).scroll(scrollFixed);

         init();
      });
   };
})(jQuery);
Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

The init function clones the table, throws away the table body, hides the clone and inserts it before the actual table. Then it "manually" sets the width of the clone's elements to those of the actual table. Whenever the user scrolls, the clone is hidden or shown appropriately and scrolled horizontally.

This is an improvement of this codepen Show archive.org snapshot .

Dominik Schöler
April 29, 2014Software engineer at makandra GmbH
Posted by Dominik Schöler to makandra dev (2014-04-29 18:31)