0

重複の可能性：
HTMLテーブルの本体をスクロールし、その頭をそのままにしておく必要があります

私は基本的なテーブルを持っています：

<div>
    <table>
        <thead><tr><th>col 1</th><th>Col 2</th></tr></thead>
        <tbody><tr><td>sweet</td><td>tooth</td></tr></tbody>
    </table>
</div>

だから私はボディセクションに200行あり、スクロールしたときに他のすべてがその下を流れる間、広告セクションが上にとどまるようにしたいと思います。とにかくCSSでこれを行うことはありますか？

次のスタイル：

div {
    max-height:400px;
    overflow:auto;
}

これを行う方法がわかりません。スクロール部分をtbodyだけにしようとしましたが、そうすると、なんらかの奇妙な理由で最大高さ部分が有効になりません。また、2つのテーブルに分割すると、列が正しい幅になりません。また、データは急激に変化するため、幅を事前に述べることはできません。そのため、データを変更できる必要があります。

何か案は？道に迷いました。

4

3 に答える 3

2

編集：実際には、これはヘッダーとテーブルの間の接続を切断するように見えるため、ヘッダー列が整列しません。誰かがそれを動作させることができる場合に備えて、私はこれをここに残しておきます。

これはどう。ヘッダーはレンダリングされるposition:absoluteため、移動しません。ただし、テーブルに余裕を持たせるには、テーブルを明示的に下に配置する必要があります。

.relative {
    position:relative;   
}
.table {
    margin-top:18px;
    max-height:400px;
    overflow:auto;
}
thead {
    position:absolute;
    top: -18px;
}

。 

<div class="relative">
    <div class="table">
        <table>
            <thead><tr><th>col 1</th><th>Col 2</th></tr></thead>
            <tbody>
                <tr><td>sweet</td><td>tooth</td></tr>
            </tbody>
        </table>
    </div>
</div>​

18pxを、広告の高さに変更します。作業サンプル： http： //jsfiddle.net/EYjd5/1/

于 2012-08-19T19:50:41.480 に答える
0

jQueryが好きな方は、DataTablesjQueryプラグインを使用してまさにそれを実現できます。

于 2012-08-19T19:55:39.473 に答える
0

可能な方法の1つはtable、メイン内に別のを作成tbodyし、その高さを制限し、を使用してオーバーフロー時にスクロールバーを取得することを確認することですoverflow: scroll;。もちろん、列を並べるには、テーブルヘッダーの効果を模倣する必要があります。これは、新しいヘッダーの最後にヘッダーと同じ非表示の行を挿入することで行いました（使用しない場合tableは非表示にする必要があります。動作しません）。サンプルは次のとおりです。visibility: hidden; opacity: 0;display: none;

HTML：

<table>
    <thead><tr><th>Name of show</th><th>Greatness</th></tr></thead>
    <tbody><table class = "limitedcontent">
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr><td>Glee</td><td>100%</td></tr>
        <tr class = "placehold"><th>Name of show</th><th>Greatness</th></tr>
    </table></tbody>
</table>

CSS：

.limitedcontent {
    height: 150px; /*or whatever your limit is*/
    overflow-y: scroll;
    overflow-x: hidden;
    display: inline-block;
}
.placehold {
    visibility: hidden;
    opacity: 0;
    height: 0px;
    overflow: hidden;
}

そして少しのデモ：少しのリンク。

それが何らかの形でお役に立てば幸いです。

于 2012-08-19T20:20:20.730 に答える