0

この質問は何百万回も尋ねられ、同じように多くの異なる解決策が与えられてきましたが、私の状況に関連するものを見つけることができないようです。

ヘッダーとフッターをロックして、親コンテナーの 100% を埋めるテーブルを作成したいと考えています。クリーンで簡単な解決策を見つけることは、ナイトの称号につながる可能性が高いため、単純な作業ではなく、Javascript が必要になる可能性があることはわかっています。これで問題ありません。

私が持っているレイアウトは次のとおりです: 2 つの固定左メニュー、2 つのヘッダーを持つ動的な幅のコンテンツ領域、および固定ヘッダーとフッターでコンテンツ領域の 100% を埋めるテーブル。

ここに画像の説明を入力

- - ここで遊ぶための Fiddle があります。- -

関連する HTML:

<div class="page-content" id="grid-container">
    <div class="table-container">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>First</th>
                    <th>Last</th>
                    <th>City</th>
                    <th>State</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Jon</td>
                    <td>Smith</td>
                    <td>Indianapolis</td>
                    <td>Indiana</td>
                </tr>
                [...etc...]
            <tfoot>
                <tr>
                    <td>First</td>
                    <td>Last</td>
                    <td>City</td>
                    <td>State</td>
                </tr>
        </table>
    </div>
</div>

関連する CSS:

.page-content {
    height:100%;
    overflow:hidden;
}

.table-container {
    box-sizing:border-box;
    height:auto;
    border:2px solid green;
    overflow:hidden;    
}
#grid-container table thead {
    position:fixed;
    top:0;
}

#grid-container table thead>tr {
    display:block;
}

#grid-container table tbody {
    display:block;
    overflow:auto;
    height:500px;
}

質問:ヘッダーとフッターをコンテンツ領域の上部と下部に貼り付けて (ブラウザーのサイズが縦に変更された場合は移動させて)、tbody をスクロール可能にするにはどうすればよいですか?

4

2 に答える 2

1

私はjavascriptを使用することになりました。これが私がしたことです：

基本的に、テーブルのコンテンツ スペースを計算し (ヘッダー、サブヘッダー、およびフィルターを差し引いたもの)、3 つのテーブルを重ね合わせました。1 つはヘッダー用、もう 1 つは本文用、もう 1 つはフッター用です。本文の高さは、計算したコンテンツ領域の高さからヘッダーとフッターの高さを差し引いたものに設定します。

$(function() {
    drawTable();

    $(window).resize(function(e) {
        drawTable();
    });
});

function drawTable() {

    // Heights for calculating content area
    var windowHeight = $(window).outerHeight();
    var toolbars = $("#toolbars").outerHeight();
    var filters = $("#filters").outerHeight();

    // Total height of the table header and footer
    var headerFooter = $("#grid-container thead").outerHeight() + $("#grid-container tfoot").outerHeight();

    // Size the parent containers based on the remaining area
    $(".page-content").height(windowHeight - toolbars);
    $("#grid-container").height(windowHeight - toolbars - filters - headerFooter);  

    // Set cell widths to be the same for the header, content, and footer
    $("#grid-container tbody td, #grid-container tfoot th, #grid-container thead th").width(100/$("#grid-container thead th").size() + "%");
}
于 2013-06-09T23:00:34.390 に答える