Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Fixed table header WITH dynamic width table?

Fixed table header WITH dynamic width table?


I've found countless Fixed Header Table examples online and as many StackOverflow posts on the subject, but have yet to find one that allows for a dynamic width table that resizes with the browser. Anytime I try to make the width dynamic the thead columns won't align with the tbody columns. Here's a fraction of the samples I've tried:

  • Pure CSS version 1
  • Pure CSS version 2
  • FixedTableHeader (which I can't get to work with jQuery 1.9.1)
  • FloatThead

jqGrid and Data Tables seem to work, but I'm trying to build a table using Knockout and would prefer to avoid both - we're actually moving away from jqGrid entirely.

Anyone suggestions?

UPDATE - I stand (or sit) corrected. jQuery.floatThead does support dynamic width tables, and the header columns line up with the body columns on window resize. I guess 50th time's a charm? I just hid the horizontal scrollbar with overflow-x:hidden; and wrapped the table in a div, which is supported by the plugin:

var $table = $('.myTable');
    scrollContainer: function ($table) {
        return $table.closest('.wrapper');
Problem courtesy of: Mark B


The temporary solution was to resize the table multiple times on window resize

$(window).on('resize', function () {
ResizeFloatThead = function () {

    var interval = 500;
    for (var i = 0; i 
Solution courtesy of: Mark B


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Fixed table header WITH dynamic width table?


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription