CODEWITHSUNDEEP
javascriptjqueryhtmlcss
amar gogoi
amar gogoi

Reputation: 13

To set table headers fixed while scrolling using JS

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?

Upvotes: 0

Views: 1363

Answers (2)

iHadaj
iHadaj

Reputation: 475

<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/

Upvotes: 0

iHadaj
iHadaj

Reputation: 475

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

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

Upvotes: 1

Related Questions