Fixed header in table inside scrollable Div

Question

My code below

<div>Some Page Content </div>

<div style="max-height: 200px; overflow: auto;">
<table id="test">
<thead>
<tr>
<th>
</th>
</th>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

<div>Some Page Content </div>

Am trying to have vertical scroll bar for Div so if it exceeds the max height am getting the scroll bar which is working fine.

Now i tried to fix the Header to be fixed

i tried position:Fixed for TH and what it does is it keeps the header fixed all through the page. I saw few posts regarding the same on Fixed header and am confused of the best way of implementing these as most of them are old answers.

My Output should be like Div(Table) should be scrollable and the header to Fixed only for that table and not for the Entire page.

Hoping for a simple and better approach to achieve this

Thanks

Gimmy · Accepted Answer · 2013-06-26 13:21:13Z

You can try to separate the header from the content: http://jsfiddle.net/u2xZU/ and put the header outside the scrollable content.

Basically, use two tables, one for the header and one for the content:

<div>Some Page Content </div>
    <table>
            <thead>
                <tr>
                    <th>Head1</th>
                    <th>Head2</th>
                    <th>Head3</th>
                </tr>
            </thead>
    </table>
    <div style="max-height: 200px; overflow: auto;">
        <table id="test">
            <tbody>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
            </tbody>
        </table>
    </div>
<div>Some Page Content </div>

is it possible to have sorting columns with this kind of approach ?
For sorting you need javascript or other script. Or you can do the sorting in Excel before output to table.
I think this is a wrong way to make it possbile If row has some other content it it this table structure will break the columns. Use content new in place of content word
This makes sense, but now you have to make the headers the same width as the table's contents. While in the jsFiddle, change the content to be wider - it no longer lines up. This is no easy task.

Eonasdan · Accepted Answer · 2013-06-26 14:17:28Z

0

Use

position:absolute

And use position:relative on the parent element with respect to which it should be absolute. You need to learn positioning in detail. I would recommend you this tutorial. Its fast way to get hands on positioning.

edited Jun 26, 2013 at 14:17

Eonasdan

7,8119 gold badges60 silver badges85 bronze badges

answered Jun 26, 2013 at 13:17

aBhijit

5,42110 gold badges38 silver badges56 bronze badges

Collectives™ on Stack Overflow

Fixed header in table inside scrollable Div

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related