Question

Hi I need a strategy for a fixed table header,

here are the strategies that have not worked for me, mainly because of certain functionality contraints:

• Copying the header and move the header according to the scrolltop

(the issue I have with this one is because of the input texts that are in the header. When I clone the header, it also clones the input form, the server-side always get the wrong session values.)

• Using the overflow-y and have the content scroll

(the problem with this one is because of the cell sizes, some of the cell sizes are dependent on the size of the header. Therefore, when I do position:absolute, the size of the cells doesn’t correspond to the size of the headers. Assigning a fixed length is really thought because the cells are generated dynamically)

PS: don’t ask me why I didn’t use a jQuery plugin, I have to code on top of the legacy code. I’m plainly running out of ideas.

Answer 1

Edit:

Refer this (not my suggestion)

This works for me (on chrome and firefox). I guess its very bad approach but worth sharing.

Markup:

<table>
        <thead>
            <tr><th>head1</th><th>head2</th></tr>
        </thead>
        <tbody>
            <tr><td>row1 col1</td><td>row1 col2</td></tr>
            <tr><td>row2 col1</td><td>row2 col2</td></tr>
        </tbody>
    </table>

CSS:

    table{
        height:2000px;
    }
    thead tr {
         position:fixed;
         left:0;
         top:0;
    }

---

Edit (after comments)

Markup:

<div id='wrapper'>
        <table>
            <thead>
                <tr><th>head1</th><th>head2</th></tr>
            </thead>
            <tbody>
                <tr><td>row1 col1</td><td>row1 col2</td></tr>
                <tr><td>row2 col1</td><td>row2 col2</td></tr>
            </tbody>
        </table>
    </div>

CSS:

#wrapper{
        height:500;
        overflow:scroll;
        width:400px;
        margin:0 auto;
        background:Gray; 
    }
    table{
        height:2000px; 
    }
    thead tr {
        position:fixed; 
        top:0;
    }