Create scrollable div with fixed header using CSS

Question

I want to create a scrollable table with fixed table header at top using CSS. could you please suggest me a solution . I tried to give overflow auto and height for tbody but it is not working.

<div class="container">
    <div class="table">
        <div class="tr header">
            <div class="td col1">
                heading1sdfsfa
            </div>
            <div class="td col2">
                heading2
            </div>
            <div class="td col3">
                heading3
            </div>
        </div>
        <div class="tbody">
            <div class="tr">
                <div class="td">
                    4343
                </div>
                <div class="td">
                    444
                </div>
                <div class="td">
                    23
                </div>
            </div>

            <div class="tr">
                <div class="td">
                    3323
                </div>
                <div class="td">
                    32423423
                </div>
                <div class="td">
                    4234
                </div>
            </div>    
            <div class="tr">
                <div class="td">
                    3323
                </div>
                <div class="td">
                    32423423
                </div>
                <div class="td">
                    4234
                </div>
            </div>    
            <div class="tr">
                <div class="td">
                    3323
                </div>
                <div class="td">
                    32423423
                </div>
                <div class="td">
                    4234
                </div>
            </div>    
            <div class="tr">
                <div class="td">
                    3323
                </div>
                <div class="td">
                    32423423
                </div>
                <div class="td">
                    4234
                </div>
            </div>    
            <div class="tr">
                <div class="td">
                    3323
                </div>
                <div class="td">
                    32423423
                </div>
                <div class="td">
                    4234
                </div>
            </div>    
            <div class="tr">
                <div class="td">
                    3323
                </div>
                <div class="td">
                    32423423
                </div>
                <div class="td">
                    4234
                </div>
            </div>    
            <div class="tr">
                <div class="td">
                    3323
                </div>
                <div class="td">
                    32423423
                </div>
                <div class="td">
                    4234
                </div>
            </div>    
            <div class="tr">
                <div class="td">
                    3323
                </div>
                <div class="td">
                    32423423
                </div>
                <div class="td">
                    4234
                </div>
            </div>    
            <div class="tr">
                <div class="td">
                    3323
                </div>
                <div class="td">
                    32423423
                </div>
                <div class="td">
                    423434355454354343 5353454354354354353455334546
                </div>
            </div>    
        </div>            
    </div>
</div>

here is the style :

.container{ width:100%; padding-top:25px;padding-top:30px;}
.table{display:table; width:90%; margin:auto; border-collapse:collapse;}
.tr{display:table-row;}
.td{display:table-cell; border:1px solid #ccc; padding:5px;}

.header .td{color:#fff; background:#000;}

.tbody{display:table-row-group; height:100px; overflow:auto}

.td.col1{width:25%;}
.td.col2{width:50%;}
.td.col3{width:25%;}

.scrollable{height:350px; overflow:auto;}

See my uncompleted fiddle here

Is this a table of data? If so why are you using `div`s? ` is fine if it is for data, not layout. — Andy, Nov 23 '12 at 11:33

score -1 · Answer 1 · answered Nov 23 '12 at 12:01

CSS doesn't allow you to do this. My Reason is..

If somehow your CSS will work then what will happen is tbody will create scroll for you..... But then to display scroll bar it needs space..... And that space will change coloumn Percentage widths...and whole structure alignment will shake.

This thing will happen with fixed width as well...

If you understood it, then thumbs up :)

Create scrollable div with fixed header using CSS

1 Answers1