Создать прокручиваемый div с фиксированным заголовком с помощью CSS

Question

Я хочу создать прокручиваемую таблицу с фиксированным заголовком таблицы сверху, используя CSS. Не могли бы вы предложить мне решение. Я попытался дать переполнение авто и высоту для тела, но это не работает.

<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>
​

вот стиль:

.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;}

Смотрите мою незавершенную скрипку здесь

Answer 1

CSS не позволяет вам сделать это. Моя причина..

Если каким-то образом ваш CSS будет работать, то произойдет, что tbody создаст для вас прокрутку..... Но тогда для отображения полосы прокрутки ему нужно пространство..... И это пространство изменит колонку в процентах ширины... и всей структуры выравнивание потрясет.

Это случится и с фиксированной шириной...

Если вы это поняли, то недурно:)