freezing header in a table in html

Question

Here, I have one table, i want to fix that header while scrolling

JS

<script>
$('#scroll').scroll(function(){
if ($('#scroll').scrollTop() > 10){
    $("thead").css({
            position: 'fixed',
            top: '68px'
        });
}else{
    $('thead').css({
        position: 'static'
    });
}
});
</script>

This is working Perfectly, but design is changing.

LIVE DEMO

could anyone help me out.

Thanks in advance.

EDIT

Fiddle

I believe it is happening because of position: 'fixed' try changing it to static and it might wok. — Aditya Ponkshe
– Aditya Ponkshe, Commented Dec 5, 2013 at 6:03
Why you wont try to use datatables.net/extras/fixedheader or tablefixedheader.com or fixedheadertable.com — Ravimallya
– Ravimallya, Commented Dec 5, 2013 at 6:03
@NareshKamireddy check out my answer bub, try using my piece of code — Aditya Ponkshe
– Aditya Ponkshe, Commented Dec 5, 2013 at 6:06

test1604 · Accepted Answer · 2013-12-05 06:02:41Z

1

You can use datatables plugin with different table types(fixed header table, example)

answered Dec 5, 2013 at 6:02

test1604

6284 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user123456789 · Accepted Answer · 2013-12-05 10:24:38Z

1

I got solution for fixed header, i used http://fixedheadertable.com/.

Thank you for your support

answered Dec 5, 2013 at 10:24

user123456789

5663 gold badges12 silver badges31 bronze badges

Comments

essmahr · Accepted Answer · 2013-12-05 06:28:57Z

0

Position: fixed will ignore all other markup on the page and position your element relative to the browser window. Regardless of the markup I think you'll want to use position: absolute and apply position: relative to the table's containing element.

example: http://jsfiddle.net/QxW6v/1/

edited Dec 5, 2013 at 6:28

answered Dec 5, 2013 at 6:05

essmahr

6764 silver badges15 bronze badges

5 Comments

user123456789 Over a year ago

can you give some example

essmahr Over a year ago

Set #scroll to position: relative and have your jQuery set <thead> to position: absolute instead of fixed on scroll. You'll need to add left: 0; right: 0; to the thead element as well.

user123456789 Over a year ago

in that case header is not freezing

essmahr Over a year ago

and you left <thead> as top: 68px?

essmahr Over a year ago

jsfiddle.net/cqDC5/2 this is as close as I'm going to get, you've added pixel dimensions to all your th and tds which forces the header to be wider than its container. Get rid of those and you should be ok.

Aditya Ponkshe · Accepted Answer · 2013-12-05 06:33:00Z

0

   <script>
$('#scroll').scroll(function(){
if ($('#scroll').scrollTop() > 10){
    $("thead").css({
            position: 'static',
            top: '68px'
        });
}else{
    $('thead').css({
        position: 'static'
    });
}
});
</script>

Use this, you are changing position of header to fixed while scrolling, which is causing the issue

edited Dec 5, 2013 at 6:33

answered Dec 5, 2013 at 6:04

Aditya Ponkshe

3,9304 gold badges43 silver badges58 bronze badges

5 Comments

Aditya Ponkshe Over a year ago

@NareshKamireddy your heading is having fixed position while being scrolled, in my opinion that is causing the issue. it should be either static or relative.

user123456789 Over a year ago

Here i want to fix the header and design also, both i need

Aditya Ponkshe Over a year ago

by fix do u mean fixed position or do u want it to stay where it is while scrolling?

user123456789 Over a year ago

header is not freezing?

Aditya Ponkshe Over a year ago

let us continue this discussion in chat

Collectives™ on Stack Overflow

freezing header in a table in html

4 Answers 4

Comments

Comments

5 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related