How to fix the heading in html table using css


Tags: html,css,html5,dom

Problem :

I am creating an HTML file I am creating a table in it . I want that header of the table should be fixed and scrolling should work for the rest of the table not for the headings. I am using the following code for this. Suggest me the best alternative for this.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.underDiv{
overflow:hidden;
width:50px;
height:150px;
background-color:#FF00FF;
position:relative;
z-index:1;
}

.overflowDiv{
z-index:4;
position:absolute;
left:25px;
top:25px;
height:50px;
width:50px;
background-color:#00FF00;
}
</style>

</head>

 <body>
  <table>
  <div>
    <div class="underDiv">
     <th>Roll no</th>
     <th> Name</th>
     </div>
    <div class="overflowDiv">
    <tr>
    <td>4085</td>
    <td>john</td>
    </tr>
    </div>
    </table>
    </body>
    </html>


Solution :

There are handy jQuery solutions for this, check out Waypoints > Sticky:

http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/


    CSS Howto..

    How to keep text in same position?

    How to have no border around a DIV

    how to cope with text to element alignment issues

    How to move an element styled by CSS stylesheet?

    How to create a fixed div inside an another div?

    how to change the css in td on mouse click using javascript

    How to create custom archive page on Tumblr

    How to add code into a page with a lot of conflicting CSS, without using Scoped CSS?

    How to Make Button Tag Only Show Image Inside of it

    How to create a dropdown that is open by default and with custom scrollbars ( see pic from wireframes) in HTML [closed]

    How do I reference this textarea and checkbox?

    How to style image in variable? [closed]

    How to get custom css to load after richfaces?

    How to reverse a CSS3 hover transformation?

    how to get by title attribute

    How to specify the system’s default serif and sans-serif font-family?

    How to add class to column of grid with angular-ui-grid?

    How to align text flush with bottom of container using CSS?

    How to make the Draggable element to get visible on top of all the element in the screen while dragging?

    LESS: how to use dumpLineNumbers

    How to create a mobile navigation toggle using pure CSS?

    CSS How To: Easily make all rules check for 1 ancestor

    How Do I Trigger My jQuery Event?

    Jquery-How to grey out the background while showing the loading icon over it

    How to get this specific responsive nav?

    How to overflow in CSS/HTML? [closed]

    How to hide and show a separate div with CSS

    sidebar is under the openlayers map how to set css

    How to create dropdown with multiple columns?

    How to set element in css at fixed position