0

HTML テンプレートに次の静的コードがあります。

<table>
    <thead></thead>
    <tbody></tbody>
</table>

ユーザーの操作に応じて、jQuery と AJAX を使用して、テーブル内の行と列を動的に配置および削除します。テーブルの下には、その他の静的コンテンツがいくつかあります。テーブルが非常に長い場合、ユーザーはテーブルの下にある静的コンテンツに到達するまでかなり長い間スクロールする必要があります。これを避けるには、テーブルの上部のみを一度に表示し、テーブルに独自のスクロールバーを用意して、ユーザーがテーブルを下にスクロールするか、ページ全体を下にスクロールして静的コンテンツにアクセスできるようにする必要があります。テーブルの下にすばやく移動します。

HTML5 を使用してこれを行う最善の方法は何ですか? フレームや特別な CSS や JavaScript が必要ですか? 事前にどうもありがとうございました！

4

2 に答える 2

4

テーブルを div 内に配置し、その div をスクロールする部分にする必要があります。

その div に固定の高さを指定し、CSS でoverflow: auto(または) を指定します。overflow-y: ...これにより、div のサイズをオーバーフローするテーブルの部分がスクロール可能になります。

http://jsfiddle.net/alnitak/Y7Yg3/を参照してください

于 2012-12-17T16:35:29.533 に答える
2

x 軸と y 軸のオーバーフローを個別に設定することもできます。

<style type="text/css">
    table td {
        border: 1px solid black;
        min-width: 50px;
        text-align: center;
    }
    div.scroll {
        float: left;
        overflow-x: hidden;
        overflow-y: scroll;
        max-height: 150px;
    }
</style>
<div class="scroll">
    <table>
        <thead></thead>
        <tbody>
            <tr><td>1</td><td>A</td></tr>
            <tr><td>2</td><td>B</td></tr>
            <tr><td>3</td><td>C</td></tr>
            <tr><td>4</td><td>D</td></tr>
            <tr><td>5</td><td>E</td></tr>
            <tr><td>6</td><td>F</td></tr>
            <tr><td>1</td><td>A</td></tr>
            <tr><td>2</td><td>B</td></tr>
            <tr><td>3</td><td>C</td></tr>
            <tr><td>4</td><td>D</td></tr>
            <tr><td>5</td><td>E</td></tr>
            <tr><td>6</td><td>F</td></tr>
            <tr><td>1</td><td>A</td></tr>
            <tr><td>2</td><td>B</td></tr>
            <tr><td>3</td><td>C</td></tr>
            <tr><td>4</td><td>D</td></tr>
            <tr><td>5</td><td>E</td></tr>
            <tr><td>6</td><td>F</td></tr>
        </tbody>
    </table>
</div>

こちらもご覧ください: http://jsfiddle.net/wcwLT/

于 2012-12-17T16:42:21.903 に答える