freezing header in a table in html

问题

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

回答1:

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

回答2:

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

Thank you for your support

回答3:

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/

回答4:

   <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

来源：https://stackoverflow.com/questions/20392574/freezing-header-in-a-table-in-html