Fix table row with certain class at top when scrolling

Question

I have a HTML table made with Javascript. http://jsfiddle.net/T9Bhm/3179/

I want to be able to scroll and keep a certain row at the top (not a header, a row). I have tried this :

 $(window).bind('scroll', function () {
     console.log('menuTop')
     if ($(window).scrollTop() > 10) {
         $('.menuTop').addClass('fixed');
     } else {
         $('.menuTop').removeClass('fixed');
     }
 });

This doesn't seem to work. I wan tthe numbers and letters to stay at the top when on scroll (the ones classed as 'menuTop'). But on scroll they all seem to fold in to one on the left hand side. The 'H' being on top.

Any ideas ?

possible duplicate of [jQuery: best plugin for table with fixed header](http://stackoverflow.com/questions/5524649/jquery-best-plugin-for-table-with-fixed-header) — benjarwar, Sep 08 '15 at 13:33
I disagree, but even if you're not using a `````` or `````` elements (which you should), you'll run into the same problem where fixed/absolute positioning puts the cells outside of the table scope (see my comment below). — benjarwar, Sep 08 '15 at 13:39

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

There's no simple way to do this purely with HTML/CSS. It requires a JavaScript solution. The basic methodology would be to clone the header cells using <div> or other block elements, and position the clones absolutely or fixed.

There are a number of plugins out there that can do this work for you. If you roll your own, you should try to write some code and post here only when you get stuck with a specific, reproducible error.

edited May 23 '17 at 12:29

Community

1
1

answered Sep 08 '15 at 13:33

benjarwar

1,794
1
13
28

ah really :( that kinda sucks, thought i was doing something wrong with the positioning :( Thanks for the links, shall get right on to it :) Ill wait a while to see if someone else answers with a solution, if not i shall chose yours as it points me in the right direction :)) – thatOneGuy Sep 08 '15 at 13:34
You *could* set absolute/fixed positioning on table header elements. The problem is that takes it out of the table rendering scope, which means `````` columns will no longer be linked to the headers, and the widths will not be properly calculated. Another solution, if you went this route, might involve iterating through the table cells to calculate the proper header elements' widths (after the table is rendered and possibly on window resize). – benjarwar Sep 08 '15 at 13:38
yeah, all that makes sense but its more work haha i thought there'd be an easier way :(( – thatOneGuy Sep 08 '15 at 13:40

score 1 · Answer 2 · answered Sep 08 '15 at 13:41

1

I think you something like this, if yes then you need to add class in 10th tr.

.fixed{
    display: table;
    left: 0;
    position: fixed;
    top: 0;
    width: 824px;
}

jsfiddle ink

Hope it will helps you.

answered Sep 08 '15 at 13:41

Mukul Kant

7,074
5
38
53

1

This fixes the elements' positions, but they will lose column alignment with the rest of the data rows/cells. – benjarwar Sep 08 '15 at 13:42

score 0 · Answer 3 · answered Sep 08 '15 at 13:46

Need to move your fixed to the row, instead of the cells and you need to have top and left style attributes set instead of letting it determine because each browser will set fixed items with user-agent defaults.

As well, a table width expands from content filling the cells, the cells on that row will not stay the same width unless you detect the "column-sibling" from calculated row-cell widths with JS and set each row-cell width in that row.

score 0 · Answer 4 · answered Sep 08 '15 at 14:07

I have managed to solve it with the help of all the other answers.

Updated fiddle : http://jsfiddle.net/T9Bhm/3183/

With this though, as mention by 'Twintails', I have to explicitly set the columns width, which is a pain if I'm honest.

The way I did it was instead of applying the fixed position to each cell in the row, I gave the class to the whole row. Then set these attributes in the css :

.fixed{    
     display: table;
    left: 0;
    position: fixed;
    top: 0;
    width: 95.72%;

}

Another thing that should never be done, is set the width in the css the way I have done here. However, it helps me in my situation.

Hopefully this helps someone else :)

Fix table row with certain class at top when scrolling

4 Answers4