To set table headers fixed while scrolling using JS

Question

In explorer I am able to keep the thead part of my table fixed while scrolling using css expressions. Below is the css code snippet that does it :

.standardTable thead tr {
position: relative;
top: expression(offsetParent.scrollTop);
}

But this same doesn't work in chrome as expressions are deprecated for chrome. I need help in changing the "top" property of the above class using javascript or jquery.

Is it possible to just change the top property in the above css using javascript or jquery.

I have gone through many examples but none of them seem to be working perfectly fine.

(PS :I am looking for single line of code that changes the top property of the above code)

Can it be done?

Answer 1

.standardTable thead tr {
    position:fixed;
    background-color: #fff;
}

Example here : http://jsfiddle.net/hweb/4wZAU/

Answer 2

<style>
#ministres thead {
    display:block;
}
#ministres tbody {
    display:block;
    height:5em; /* 5 times the equivalent of a text "size". */
    overflow-y:scroll;
}

    #ministres thead tr th:nth-child(1) { /* column 1 ! */
        width:5em;
    }
    #ministres thead tr th:nth-child(2) { /* column 2 */
        width:10em;
    }
    #ministres tbody tr:first-child td:nth-child(1) { /* column 1 ! */
        width:5em;
    }
    #ministres tbody tr:first-child td:nth-child(2) { /* column 2 */
        width:10em;
    }
</style>
<table id="ministres" border="1">
    <thead>
        <tr><th>Nom</th><th>Ministère</th></tr>
    </thead>
    <tbody>
        <tr><td>JM Ayrault</td><td>Premier</td></tr>
        <tr><td>L Fabius</td><td>A. Etrangères</td></tr>
        <tr><td>V Peillon</td><td>Education</td></tr>
        <tr><td>C Taubira</td><td>Justice</td></tr>
        <tr><td>P Moscovici</td><td>Economie</td></tr>
        <tr><td>M Valls</td><td>Intérieur</td></tr>
    </tbody>
</table>

Exemple here : http://jsfiddle.net/hweb/7eGT9/