css - 使用 CSS 创建带有固定标题的可滚动 div

Question

我想使用 CSS 创建一个顶部固定表头的可滚动表。你能建议我一个解决方案吗？我试图为 tbody 提供溢出自动和高度，但它不起作用。

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

​</p>

在这里查看我未完成的小提琴

Answer 1

CSS 不允许你这样做。我的理由是..

如果你的 CSS 能以某种方式工作，那么 tbody 会为你创建滚动......但是要显示滚动条，它需要空间......并且该空间将改变列百分比宽度......和整个结构对齐会动摇。

这件事也会发生在固定宽度上......

如果你理解了，那就点个赞吧：）