Question

我想使用CSS在顶部创建一个带有固定表头的可滚动表。你能给我一个解决方案吗？我试图为tbody提供溢出auto和height但是它不起作用。

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

查看我未完成的fiddle here

Answer 1

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

如果你的CSS会以某种方式运行，那么会发生什么事情才会为你创建滚动..... 但是要显示滚动条它需要空间..... 而且这个空间会改变coloumn百分比宽度......整个结构的对齐会动摇。

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

如果你理解它，那么竖起大拇指：）

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

1 个答案: