0

背景: 私は CSS を使用して、ページ上のすべてが常に表示され、特定のものだけpanesがスクロール可能なエクスペリエンスのような Web アプリを作成しています。これをテーブルに拡張する必要があります。テーブルのヘッダー (および場合によってはフッター) を常に表示したままにしたいのですが、テーブルの本文はスクロールのみ可能にする必要があります。

私がこれまで行ってきたことは、「ペイン」クラスをtheadandtfootに適用し、tbody自動で高さを埋めてからスクロール可能にすることです。これはすべて機能しますが、thead、tbody、および tfoot が 100% 幅ではなくなります。この方法は、私が望むものに最も近いようです。

Fiddle: 私は JSFiddle を持っています。これは私を近づけます。これは、fixed および scrollable を作成するために使用しているコードも示していますpanes。http://jsfiddle.net/va4HF/1/

要件:pane理想的には、 css をそのまま維持したいのですが、テーブルが必要な場合は変更します。また、この CSS のみを保持したいと思います。

次のコードは私の概念実証コードであり、Pane CSS も含まれています。

HTML:

<div class="column">
    <div class="pane top">Top</div>
    <div class="pane middle">
        <table>
            <thead class="pane table-head">
                <tr>
                    <th>Header</th>
                </tr>
            </thead>
            <tbody class="pane table-body fill">
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
            </tbody>
            <tfoot class="pane table-foot">
                <tr>
                    <th>Footer</th>
                </tr>
            </tfoot>
        </table>
    </div>
    <div class="pane bottom">Bottom</div>
</div>

CSS:

body, html {
    height:100%;
    margin:0;
    padding:0;
}
div {
    box-sizing:border-box;
    box-sizing:content-box\9; /* Fix for IE9 sizing */
    -moz-box-sizing:border-box; /* Fix for firefox sizing */
}
.column {
    position:absolute;
    width:100%;
    min-height:100%;
    height:auto;
    overflow:hidden;
}
.pane {
    position:absolute;
    width:100%;
    overflow:hidden;
}
.fill {
    height:auto;
    overflow:auto;
}
.top {
    background:pink;
    height: 20%;
    top:0;
}
.middle {
    background:red;
    top:20%;
    bottom:50px;
}
.table-head {
    height: 40px;
    top:0;
}
.table-body {
    top:40px;
    bottom:40px;
}
.table-foot {
    height: 40px;
    bottom:0;
}
.bottom {
    background:orange;
    height: 50px;
    bottom:0;
}
table thead tr, table tfoot tr {background:rgba(0,0,0,0.5);}
table tbody tr {background:rgba(0,0,0,0.3);}
table td, table th {padding:10px; color:#fff;}

/* Fix for Safari scrollbars (also styles Chrome scrollbars) */
    .fill::-webkit-scrollbar {-webkit-appearance: none;width: 10px;}
    .fill::-webkit-scrollbar-track {background-color: rgba(0,0,0, .3);border-radius: 0px;}
    .fill::-webkit-scrollbar-thumb {border-radius: 0px; background-color: rgba(255,255,255, .4);}

調査: 他の誰かが、100% の親の高さを固定ヘッダー/フッターで埋めるテーブルで同様の状況でこれを尋ねましたが、良い応答が得られず、Javascript を使用することになりましたが、CSS ソリューションを試してみたいと思います。または、少なくとも、彼が使用したものよりも単純な Javascript ソリューション (3 つのテーブルをオーバーレイする必要はありません)

4

2 に答える 2

1

このためのすべてのオプションを把握するために多くの調査を行った後、ヘッダー、本文、フッターに個別のテーブルを使用することを選択し、各テーブルを div で囲みました。次に、その div を「ペイン」としてスタイルします。ヘッダー テーブルとボディ テーブルの列が同じ幅に設定されている限り、それらは整列します。

私がしなければならなかったいくつかのクリーンアップがありました。そのうちの1つは、垂直スクロールバーを常に表示したままにし、ヘッダーとフッターテーブルにマージンを追加して、本文がスクロールを開始するかどうかにかかわらず、ヘッダーが常に行になるようにする必要がありました上。

次のようになります。

    <div class="pane table-head">
        <table>
            <thead class="">
                <tr>
                    <th>Header</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="pane table-body fill">
        <table>
            <tbody>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                ...
            </tbody>
        </table>
    </div>
    <div class="pane table-foot">
        <table>
            <tfoot>
                <tr>
                    <th>Footer</th>
                </tr>
            </tfoot>
        </table>
    </div>

更新された JSFiddle を参照してください: http://jsfiddle.net/bluecaret/va4HF/5/

これはまだ理想的な解決策ではありません。いくつかのテストに基づいて潜在的な問題を確認できますが、これを捨てて div ベースのテーブルの Fabio の解決策を使用することになるかもしれません。今のところ、これは私が固執するものです。

于 2013-10-21T21:47:40.223 に答える
0

最初の質問は、なぜテーブルを使用するのかということですが、念のためこれを使用してください。

table, th{width:100% !important; min-width:240px; }

ここで、min-width はテーブルの最小幅です

繰り返しになりますが、本当に div を使用する必要があります: 少ない、簡単なマークアップ、このような問題はありません

于 2013-10-19T01:18:00.137 に答える