Table header needs to remain fixed during scrolling

Question

I have a table with a header and a body, and I want the table header to remain fixed while scrolling happens on the body.

The table is set up like so:

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>

        ...more rows for data...

    </tbody>

The table is encapsulated with a and has CSS like:

overflow-x: hidden;
overflow-y: auto;
height: 400px;

I need the table header to remain perfectly still but when I add position: fixed; to thead or to the individual th the header gets squished.

Whats the best approach for this?

I can recommend a cool resource on positioning - http://learnlayout.com/. In general, position:fixed is what i would go with, as Jason replied below. — Max Malyk, Sep 05 '13 at 19:27
since i wrote a plugin that does this, i can say that fixed positioning is a very important but a very small part of the equation — mkoryak, Sep 05 '13 at 20:48
@cdub can you share some codes with me like how its working with html and script code — , Mar 08 '19 at 06:45

mkoryak · Accepted Answer · 2013-09-05T21:29:47.940

18

i just updated a plugin that I wrote that does this exact thing:

http://mkoryak.github.io/floatThead/

it may be what you need

edited Sep 05 '13 at 21:29

answered Sep 05 '13 at 20:46

mkoryak

57,086
61
201
257

Hi, I have used your plugin for fixed header & it works perfectly. Same thing I want to do for first column to fixed when scroll horizontally. Do you have any suggestions for this that how can I achieve both fixed header & fixed first column when scroll vertically & horizontally. Hope you can get back to me with some solution as early as possible. Thanks in advance... – Pankaj K May 16 '15 at 05:43
google it, there might be a plugin that locks the first column that works nicely with my plugin. my plugin does not lock the first column and never will – mkoryak May 18 '15 at 16:14
@mkoryak hey sir can you share a small source code of scrolling table body with fix header,because i went to your link but there is no perfect example of that there is nohtml – Mar 08 '19 at 06:43
no I cannot, that is a silly thing to ask. – mkoryak May 10 '19 at 15:20

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

1

If you need your tables to contain any dynamic data so that you can't specify width, you'll have to use a JS/jQuery solution like the following:

Table header to stay fixed at the top when user scrolls it out of view with jQuery

If you know exactly what is going to be displayed though and don't mind making some tweaks/hacks, you can just make your thead position:fixed, then mess with the spacing until it looks good.

Take a look at this jsFiddle to see what I mean.

EDIT: Here's an updated jsFiddle that's spaced a little better, because OP was too lazy to type in a few characters for himself and expects others to do everything for him.

http://jsfiddle.net/yXTD9/1/

edited May 23 '17 at 12:01

Community

1
1

answered Sep 05 '13 at 19:24

Jason

3,330
1
33
38

The JSFiddle is not what I meant, as your header does not match your data. Look at columns 2 and 3. – cdub Sep 05 '13 at 19:45
Did you mess with the code or just glance at the page and see if the work was done for you? Hell did you even read my post? – Jason Sep 05 '13 at 19:55
1

this problem cant be solved with pure css, if you want a generic solution.. see: http://jsfiddle.net/yXTD9/2/ and scroll to the bottom of the page. or http://jsfiddle.net/yXTD9/3/ :P – mkoryak Sep 05 '13 at 21:00

Table header needs to remain fixed during scrolling

2 Answers2