Static Table Header Inside Horizontal Scroll Div

Question

I have a table inside div. The div is scrollable horizontally and vertically. I need the table header to be static on top when i scroll down the table.

<div id='result' style='overflow:scroll;width:173px;height:115px;'>
<table>
    <tr>
        <th>Head1</th><th>Head2</th><th>Head2</th><th>Head3</th>
    </tr>
    <tr>
        <td>column1</td><td>column2</th><td>column3</td><td>column4</td>
    </tr>
    <tr>
        <td>column1</td><td>column2</th><td>column3</td><td>column4</td>
    </tr>

</table>

jSfIDDLE

Take a look here http://stackoverflow.com/questions/17827908/how-to-make-fixed-header-table-inside-scrollable-div — Alex Char, Jun 24 '14 at 13:57
i cannot use that because the header is very long and the header should also be inside the horizontally scrollable div — Manu, Jun 24 '14 at 14:02
if you dont mind using javascript and jquery, you could use code fomr this fiddle i found on google http://jsfiddle.net/livibetter/HV9HM/ — Banana, Jun 24 '14 at 14:11
the headers are inside a scrollable div since the number of div is more than 20. so i need the static header inside scrollable div — Manu, Sep 26 '14 at 05:04

score 0 · Answer 1 · answered Jun 24 '14 at 14:23

The only way to do what you are asking, using css and html alone, that i can think of is by splitting the table to a header table and a content table and wrap the content table in a scrollable div:

html:

<table class="the_Table">
    <tr class="static_header">
        <th>Head1</th>
        <th>Head2</th>
        <th>Head2</th>
        <th>Head3</th>
    </tr>
</table>
<div id='result' class="scrollable">
    <table class="the_Table">
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
        <tr>
            <td>column1</td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
        </tr>
    </table>
</div>

css:

.the_Table {
    width:300px;
    text-align:center;
}
.scrollable {
    position:relative;
    overflow:scroll;
    height:115px;
    width:330px;
}

live example: Fiddle

it can also be achieved easily using Javascript, and even easier with jQuery.

i have 20 headers that need to be inside a horizontally scrollable div. so the header should be static inside a scrollable div — Manu, Sep 26 '14 at 05:02
If you scroll the header, you will need the table body to scroll as well. it wont make sense to the user if you detach header from body and scroll separately. You can achieve that by either putting the entire table as it is in my code, into another horizontally scrollable div, or add the header into a scrollable div just like the body, and use javascript to synchronize their `.scrollLeft()` when the user scrolls one of them — Banana, Sep 26 '14 at 05:08

Static Table Header Inside Horizontal Scroll Div

1 Answers1