Trying to create a fixed header effect by using two tables and three divs

Question

fiddle - Short version - purple part needs tucked in to parent div

I'm basically trying to create a fixed header look for a table by splitting it into two I'm trying to avoid javascript as what I'm doing relies on some dynamically generated tables and I have no idea how many header rows I'd need anyway.

This JS Fiddle is really really close to exactly what I need. I just need to basically tuck in the purple part so its not sticking out and the vertical scroll bar is view able. Also the horizontal scrollbar at bottom should control both of the divs horiz scrolling.

I can acomplish both of these things but not at the same time.

I'm open to using javascript, but it needs to be able to do multiple headers without knowing the height and width of either the fixed headers or the other rows and also needs to be able to squeeze into a div that can scroll horiz and vertically.

this is an extremely similar question but no one answered it Fixed header table with horizontal scrollbar and vertical scrollbar on

HTML PART

<div class="main">
    <div class="right">
        <div class="top_right">
            <table>
                <tr>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                    <td>"top_right"</td>
                </tr>
                <tr>
                    <td>"top_right"</td>
                </tr>
                <tr>
                    <td>"top_right"</td>
                </tr>
                <tr>
                    <td>"top_right"</td>
                </tr>
            </table>
        </div>
        <div class="bottom_right">
            <table>
                <tr>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
                <tr>
                    <td>"bottom_right"</td>
                </tr>
            </table>
        </div>
    </div>
</div>

CSS PART

html, body {
    height:100%;
}
.main {
    position: relative;
    height: 600px;
    background-color: lightblue;
    margin: 50px 50px;
}
.right {
    height: 100%;
    width: 800px;
    overflow: scroll;
}
.top_right {
    z-index: 2;
    position: absolute; 
    top: 0px;
    left: 0px;
    width: 9000px;
    background-color:purple;
    overflow-x: hidden;
    overflow-y: hidden;
}
.bottom_right {
    background-color: pink;
    position: relative;
    top: 100px;
    left: 0px;
    height: 1000px;
    width: 9000px;
    overflow-x:hidden;
    overflow-y:hidden;
}

Because if the fiddle link is dead your question will be of no use to future visitors without code, so we push users to contribute related code — Mr. Alien, May 24 '13 at 06:34
makes sense. good thing too, cause right after that I accidentally reverted it to a previous version. — Dave2081, May 24 '13 at 06:38
do you need something like this? http://jsfiddle.net/EPeLX/8/ — DiederikEEn, May 24 '13 at 07:49
@DiederikEEn I don't see a difference between that and my link. — Dave2081, May 24 '13 at 08:13

Natalie Hedström · Answer 1 · 2013-05-24T06:59:34.363

0

Since you have a fixed height on your parent div (main)

.main {
    **height: 600px;**
    background-color: lightblue;
    margin: 50px 50px;
}

Why not just set a fixed height on your right-div as well, this way it will always be as high as the wrapper and the scrollbar is still viewable http://jsfiddle.net/EPeLX/6/

.right {
    width:500px;
    background-color:purple;
    overflow-x: scroll;
    overflow-y: scroll;
    height: 600px;
}

edited May 24 '13 at 06:59

answered May 24 '13 at 06:50

Natalie Hedström

2,607
3
25
36

I'm not sure you saw the right jsFiddle link. The correct version should have no "left" class div – Dave2081 May 24 '13 at 06:58
Yes, I think you updated it after I opened it up :) Well you can put width: 800px; and overflow:scroll; to your top_right div and it will scroll horizontally. Like this http://jsfiddle.net/EPeLX/12/ Edit: forgot to mention you would also have to remove overflow-x: hidden; and overflow-y: hidden; from the css for the div – Natalie Hedström May 24 '13 at 09:28

Trying to create a fixed header effect by using two tables and three divs

1 Answers1