Making the widths of columns in a "floating" table header fixed

Question

I have a floating HTML table header, which remains at the top when the table is being scrolled through. I have implemented in by cloning the header of the original table and then hiding / showing it based on the scroll position.

When my table had a few columns, the "floating-header" had the same column width as the columns in the original table, due to this code:

$headerClone.children().outerWidth(function(i,val){
    return $headerGrandChildren.eq(i).outerWidth(true);
});

However, now that the table has more columns and goes over the page right margin, the "floating-header" width is being adjusted and squeezed, disregarding the set width=x style element and the table-layout: fixed; CSS, see screenshot:

I have read that "The browser will then set column widths based on the width of cells in the first row of the table" in here.

Question: how to best set the fixed size of the "floating-header"? Should I create an invisible row that would accompany the "fixed-header" so it would not resize as soon as my table is wider than the page?

It would be a heck of a lot easier just to use `position: fixed` to ensure your header stays at the top of the page. Also, if you insist on using tables, I'd also recommend setting a `max-width` of `100%` to prevent it from needing a horizontal scroll. — Obsidian Age, Dec 12 '17 at 19:57
You can use this plugin or get the idea from it: https://github.com/jmosbech/StickyTableHeaders — phobia82, Dec 12 '17 at 20:07
@ObsidianAge - when I add the `possition: fixed` to the `` the header does not look like part of the table anymore, the widths of each column is not the same as for the table itself. — Mindaugas Bernatavičius, Dec 12 '17 at 20:49
Woah, you shouldn't be using a `` at *all* for a "header", and you certainly shouldn't be adding the `position` property to the `` element. It would go on the `
` used to *contain* the `
`. I'd recommend avoiding table-based layouts entirely if at all possible, as they're not built for responsiveness.

score 0 · Answer 1 · answered Dec 12 '17 at 20:43

0

Maybe this helps:

$('table, td, th, thead').width(function() {    
    return $(this).width();
});

$('td, th').height(function() { 
    return $(this).height();
});

$('table, thead').css('display','block')

answered Dec 12 '17 at 20:43

Hans Dash

761
4
18

score 0 · Accepted Answer · answered Dec 13 '17 at 11:22

I have added the logic to copy not only the header (for it to become a fixed header) but also the first row, since: "The browser will then set column widths based on the width of cells in the first row of the table".

.append($tbodyFirstRowClone.css('visibility', 'collapse'))

And used:

position: sticky;

It solves the issue for my usecase. Specifically:

There was no use for responsiveness in my case;
position: fixed; is not sideways-scroll-able so I can't use it;

Making the widths of columns in a "floating" table header fixed

2 Answers2