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?

iHadaj · Accepted Answer · 2014-04-10 12:29:35Z

1

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

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

answered Apr 10, 2014 at 12:29

iHadaj

4755 silver badges7 bronze badges

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

1 Comment

amar gogoi Over a year ago

sorry friend..that's not the solution

iHadaj · Accepted Answer · 2014-04-18 08:45:11Z

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

Collectives™ on Stack Overflow

To set table headers fixed while scrolling using JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related