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

score 12 · Accepted Answer · answered Jun 26 '13 at 13:21

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 ? — user2067567, Jun 26 '13 at 14:05
For sorting you need javascript or other script. Or you can do the sorting in Excel before output to table. — Gimmy, Jun 26 '13 at 14:07
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 — Arpit Vaishnav, Oct 09 '13 at 11:46
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. — Michael, Apr 15 '15 at 18:26

score 0 · Answer 2 · edited Jun 26 '13 at 14:17

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 '13 at 14:17

Eonasdan

7,563
8
55
82

answered Jun 26 '13 at 13:17

aBhijit

5,261
10
36
56

Fixed header in table inside scrollable Div

2 Answers2

Linked