-1

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

</p>

ここで私の未完成のフィドルを参照してください

4

1 に答える 1

-1

CSS では、これを行うことはできません。私の理由は..

どういうわけかCSSが機能する場合、tbodyがスクロールを作成します....しかし、スクロールバーを表示するにはスペースが必要です....そして、そのスペースは列のパーセンテージ幅...そして構造全体を変更しますアライメントが揺れます。

このことは、固定幅でも発生します...

あなたがそれを理解したなら、親指を立ててください:)

于 2012-11-23T12:01:49.237 に答える