-1

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

Improve this question
9
  • 2
    step one, use correct html. Commented Jun 24, 2014 at 13:39
  • step two, show us what you have tried so far Commented Jun 24, 2014 at 13:40
  • maybe he wanted it? codepen.io/anon/pen/uFwme Commented Jun 24, 2014 at 13:51
  • i just added the jsFiddle. is that ok Commented Jun 24, 2014 at 13:55
  • Take a look here stackoverflow.com/questions/17827908/… Commented Jun 24, 2014 at 13:57

1 Answer 1

Reset to default
0

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.

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

2 Comments

i have 20 headers that need to be inside a horizontally scrollable div. so the header should be static inside a scrollable div
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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.