0

HTML でスクロール可能なテーブルを作成しましたが、ヘッダーをスクロール可能にしたくありません。

<div style="max-height:80px;width:10%;overflow-y: scroll">
<div style="display:table">
    <div id="table_header" style="display:table-row;background-color:gray"> 
        <div style="display:table-cell"> 
            Name
        </div>
        <div style="display:table-cell"> 
            Age
        </div>
    </div>
    <div style="display:table-row"> 
        <div style="display:table-cell"> 
            Zarazaz 
        </div>
        <div style="display:table-cell"> 
            13 
        </div>
    </div>
    <div style="display:table-row"> 
        <div style="display:table-cell"> 
            Kamuff 
        </div>
        <div style="display:table-cell"> 
            123 
        </div>
    </div>
    <div style="display:table-row">
        <div style="display:table-cell"> 
            Darandund 
        </div>
        <div style="display:table-cell"> 
            145
        </div>
    </div>
    <div style="display:table-row">
        <div style="display:table-cell"> 
            Bazabunzi 
        </div>
        <div style="display:table-cell"> 
            145
        </div>
    </div>
</div>
</div>

ヘッダーをテーブルの外側に配置しようとしましたが、そうする際の問題は、内部のテキストの長さに応じて列のサイズが変更される可能性があり、ヘッダーが下の列と整列しないことです (特に必要な場合)より多くの列を持つため)。あなたは何をすることを提案しますか?

4

1 に答える 1

0

これにはテーブルを使用することをお勧めします。インターネットで検索したところ、tbody scrollingさらに役立つ結果がいくつか得られました。

于 2012-12-19T17:16:21.070 に答える