web-dev-qa-db-ja.com

テーブルのボディをスクロールさせながら、頭を固定したままにするにはどうすればよいですか？

設定サイズを維持するためにHTMLテーブルが必要なページを書いています。常にそこにとどまるにはテーブルの上部にヘッダーが必要ですが、テーブルに追加された行数に関係なくスクロールするためにテーブルの本体も必要です。 Excelのミニバージョンを考えてください。これは簡単な作業のように思えますが、Webで見つけたほとんどすべてのソリューションには欠点があります。どうすれば解決できますか？

javascripthtmlcsshtml-table
144
minty

私は同じ答えを見つけなければなりませんでした。私が見つけた最良の例は http://www.cssplay.co.uk/menu/tablescroll.html -例2は私にとってはうまくいくことがわかった。 Javaスクリプトで内部テーブルの高さを設定する必要があります。残りはCSSです。

53
Ken Penn

DataTables は非常に柔軟であることがわかりました。デフォルトバージョンはjqueryに基づいていますが、 AngularJsプラグイン もあります。

34
Vitalii Fedorenko

私はショーン・ハディの 同様の質問に対する優れた解決策 を見て、 編集を行う の自由を取りました：

  • IDではなくクラスを使用して、1つのjQueryスクリプトを1ページの複数のテーブルに再利用できるようにします
  • Caption、thead、tfoot、tbodyなどのセマンティックHTMLテーブル要素のサポートが追加されました
  • スクロール可能な高さより「短い」テーブルに表示されないように、スクロールバーをオプションにしました
  • スクロールdivの幅を調整して、スクロールバーをテーブルの右端に移動しました
  • コンセプトにアクセスできるようにしました
    • 挿入された静的テーブルヘッダーでaria-hidden = "true"を使用する
    • 元のtheadをそのまま残し、jQueryで非表示にしてaria-hidden="false"を設定します
  • サイズの異なる複数のテーブルの例を示した

しかし、ショーンは重荷を持ち上げました。 tfootをサポートする必要性を指摘してくれたMatt Burlandにも感謝します。

http://jsfiddle.net/jhfrench/eNP2N/ で自分の目で確かめてください。

12
Jeromy French

Theadとtbodyを使用して、overflow：scrollでtbodyに固定の高さを設定しようとしましたか？

ターゲットブラウザは何ですか？

編集：Firefoxでは（ほとんど）うまく機能しました-垂直スクロールバーを追加すると、水平スクロールバーも必要になりました-うんIEは、各tdの高さを、tbodyの高さを指定したものに設定するだけです。ここに私が思いつく最高のものがあります：

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table { width:300px; }
    tbody { height:10em;  overflow:scroll;}
    td { height:auto; }
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>
8
Chris Marasti-Georg

必要なのは：

1）高さが制限されたテーブル本体を使用スクロールはコンテンツがスクロールウィンドウよりも大きい場合にのみスクロールが発生するため。ただし、tbodyのサイズを変更することはできません。そのためには、blockとして表示する必要があります。

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

2）テーブルヘッダーとテーブルボディの列幅を再同期後者をblockにすると、それは無関係な要素になりました。これを行う唯一の方法は、両方に同じ列幅を強制することによって同期をシミュレートすることです。

ただし、tbody自体は現在blockであるため、tableのように動作することはできません。列を正しく表示するには、まだtableの動作が必要であるため、解決策は、各行を個別のtablesとして表示するように要求することです。

thead {         
   display: table;  
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

（この手法を使用すると、行にまたがることができなくなることに注意してください）。

それが完了したら、theadとtbodyの両方で同じ幅になるように列幅を強制できます。それはできませんでした：

  • 各列に対して個別に（特定のCSSクラスまたはインラインスタイリングを通じて）、これは各テーブルインスタンスに対して非常に面倒です;
  • すべての列に対して均一に（たとえば、5列がある場合はth, td { width: 20%; }を使用）、これはより実用的です（各テーブルインスタンスの幅を設定する必要はありません）が、列数に対しては機能しません
  • 固定されたテーブルレイアウトにより、すべての列数に対して均一になります。

私は、追加が必要な最後のオプションを好みます：

thead {
   table-layout: fixed;   // Same layout for all cells
}
tbody tr {
   table-layout: fixed;   // Same layout for all cells
}
th, td {
   width: auto;   // Same width for all cells, if table has fixed layout
}

この質問 への回答から分岐したデモ こちら をご覧ください。

7
Javarome

編集：これは非常に古い答えであり、2000年代に一度サポートされたが、ブラウザ戦略が2010年は、一部の機能が削除された場合でもW3C仕様を尊重することでした。固定ヘッダー/フッター付きのスクロール可能なテーブルは、HTML5より前に不格好に指定されていました。

悪いニュース

残念ながら、固定のthead/tfootでスクロール可能なテーブルを処理するエレガントな方法はありません。これは、 HTML/CSS仕様ではその機能についてあまり明確ではないため であるためです。

説明

HTML 4.01 Specification は、thead/tfoot/tbodyがテーブル本体のスクロールに使用されます（導入されましたか？）

テーブル行は、THEAD、TFOOT、およびTBODY要素[...]を使用してグループ化できます[...]。この分割により、ユーザーエージェントはテーブルの頭と足に関係なくテーブル本体のスクロールをサポートできます。

ただし、FF 3.6の作業スクロール可能テーブル機能は、HTML/CSS仕様に準拠していないためバグと見なされたため、FF 3.7で削除されました。 this および that FFバグに関するコメントを参照してください。

Mozilla Developer Networkのヒント

以下は、スクロール可能なテーブルのMDNの便利なヒントの簡易版です
このアーカイブされたページを参照 または 現在のフランス語版

<style type="text/css">
table {
  border-spacing: 0;              /* workaround */
}
tbody {
  height: 4em;                    /* define the height */
  overflow-x: hidden;             /* esthetics */
  overflow-y: auto;               /* allow scrolling cells */
}
td {
  border-left:   1px solid blue;  /* workaround */
  border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
    <thead><tr><th>Header
    <tfoot><tr><th>Footer
    <tbody>
        <tr><td>Cell 1    <tr><td>Cell 2
        <tr><td>Cell 3    <tr><td>Cell 4
        <tr><td>Cell 5    <tr><td>Cell 6
        <tr><td>Cell 7    <tr><td>Cell 8
        <tr><td>Cell 9    <tr><td>Cell 10
        <tr><td>Cell 11   <tr><td>Cell 12
        <tr><td>Cell 13   <tr><td>Cell 14
    </tbody>
</table>

ただし、MDNは FFではこれ以上動作しません :-(
IE8でもテストしました=>テーブルはスクロールできません：-（（

4
olibre

このソリューションはChrome 35、Firefox 30およびIE 11で動作します（他のバージョンではテストされていません）

その純粋なCSS： http://jsfiddle.net/ffabreti/d4sope1u/

すべてがdisplay：blockに設定され、テーブルには高さが必要です：

    table {
        overflow: scroll;
        display: block;    /*inline-block*/
        height: 120px;
    }
    thead > tr  {
        position: absolute;
        display: block;
        padding: 0;
        margin: 0;
        top: 0;
        background-color: gray;
    }
    tbody > tr:nth-of-type(1) {
        margin-top: 16px;
    }
    tbody tr {
        display: block;
    }

    td, th {
        width: 70px;
        border-style:solid;
        border-width:1px;
        border-color:black;
    }
3
Fernando Fabreti

まだ誰かがこれを見ているかどうかはわかりませんが、私が以前にこれを行った方法は、2つのテーブルを使用して単一の元のテーブルを表示することです-最初の元のテーブルタイトル行とテーブル本体行なし（または空の本体行）検証）。

2番目は別のdivにあり、タイトルはなく、元のテーブル本体行のみがあります。その後、個別のdivはスクロール可能になります。

Divの2番目のテーブルは、HTMLの最初のテーブルのすぐ下に配置され、固定ヘッダーとスクロール可能な下部セクションを持つ単一のテーブルのように見えます。これはSafari、Firefox、およびIE（2010年春の最新バージョン）でしかテストしていませんが、すべてで機能しました。

唯一の問題は、最初のテーブルが本文なしで検証されないことであり（W3.orgバリデータ-XHTML 1.0 strict）、コンテンツのないテーブルを追加すると空白行が発生しました。 CSSを使用してこれを非表示にすることができますが、それでもページ上のスペースを使い果たします。

3
Mick

これにより、私たちのアプリケーションにそのようなグリッドを実装しようとして、大きな頭痛の種ができました。いろいろなテクニックを試してみましたが、それぞれに問題がありました。私が最も近づいたのは、 Flexigrid （ http://www.ajaxrain.com で代替案を探す）などのjQueryプラグインを使用することでしたが、これはサポートしていないようです100％幅のテーブルが必要でした。

私がやったことは、自分で転がすことでした。 Firefoxはtbody要素のスクロールをサポートしているため、ブラウザでスニッフィングし、適切なCSS（高さ、オーバーフローなどを設定して詳細を確認します）を使用してスクロールし、他のブラウザでは、使用するtable-layout: fixedを使用する2つの個別のテーブルセット指定されたサイズをオーバーフローしないように保証されたサイジングアルゴリズム（コンテンツが大きすぎて収まらない場合、通常のテーブルが拡張されます）。両方のテーブルに同じ幅を与えることで、列を揃えることができました。スクロールするように設定されたdivで2番目のdivをラップし、マージンなどを備えたちょっとしたジグリーポケリーを使用して、希望どおりのルックアンドフィールを得ることができました。

この回答が場所で少しあいまいに聞こえる場合は申し訳ありません。時間がないので、すぐに書いています。さらに拡張したい場合はコメントを残してください！

2
Luke Bennett

IEおよびFF（少なくとも）で実際に機能するコードを次に示します。

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        table{
            width: 400px;
        }
        tbody {
            height: 100px;
            overflow: scroll;
        }
        div {
            height: 100px;
            width: 400px;
            position: relative;
        }
        tr.alt td {
            background-color: #EEEEEE;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            div {
                overflow-y: scroll;
                overflow-x: hidden;
            }
            thead tr {
                position: absolute;
                top: expression(this.offsetParent.scrollTop);
            }
            tbody {
                height: auto;
            }
        </style>
    <![endif]--> 
</head>
<body>
    <div >
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th style="background: lightgreen;">user</th>
                    <th style="background: lightgreen;">email</th>
                    <th style="background: lightgreen;">id</th>
                    <th style="background: lightgreen;">Y/N</th>
                </tr>
            </thead>
            <tbody align="center">
                <!--[if IE]>
                    <tr>
                        <td colspan="4">on IE it's overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>[email protected]</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>[email protected]</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>[email protected]</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>[email protected]</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>[email protected]</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>[email protected]</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>[email protected]</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>[email protected]</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

元のコードをより明確にするために変更し、IEおよびFFでも正常に機能するようにしました。

元のコード ここ

2
Daniel Costa

これが私の代替案です。また、ヘッダー、ボディ、およびフッターに異なるDIVを使用しますが、ウィンドウのサイズ変更と、検索、スクロール、並べ替え、フィルタリング、および位置決めと同期します。

マイCDリスト

Jazz、Classical ...ボタンをクリックして、表を表示します。 JavaScriptがオフになっていても十分であるように設定されています。

IE、FF、およびWebKit（Chrome、Safari）では問題ないようです。

1
goneill

ライブ JsFiddle

HTMLとCSSのみで可能です

table.scrollTable {
  border: 1px solid #963;
  width: 718px;
}

thead.fixedHeader {
  display: block;
}

thead.fixedHeader tr {
  height: 30px;
  background: #c96;
}

thead.fixedHeader tr th {
  border-right: 1px solid black;
}

tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
}

tbody.scrollContent td {
  background: #eee;
  border-right: 1px solid black;
  height: 25px;
}

tbody.scrollContent tr.alternateRow td {
  background: #fff;
}

thead.fixedHeader th {
  width: 233px;
}

thead.fixedHeader th:last-child {
  width: 251px;
}

tbody.scrollContent td {
  width: 233px;
}
<table cellspacing="0" cellpadding="0" class="scrollTable">
  <thead class="fixedHeader">
    <tr class="alternateRow">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody class="scrollContent">
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>End of Cell Content 1</td>
      <td>End of Cell Content 2</td>
      <td>End of Cell Content 3</td>
    </tr>
  </tbody>
</table>
1
Md. Rafee

上記の提案で私が抱えていた主な問題は、tablesorter.jsをプラグインでき、特定の最大サイズに制限されたテーブルのヘッダーをフロートできることでした。最終的にプラグイン jQuery.floatThead に出くわしました。これにより、フローティングヘッダーが提供され、ソートが引き続き機能するようになりました。

また、自分自身と 類似のプラグイン を表示するニース比較ページもあります。

1
Guy Hollington

質問に対するすべての返信を読んでいません。

ええ、あなたが望むもの（私はすでにやった）

同様のスタイリングに同じクラス名を持つ2つのテーブルを使用できます。1つはテーブルヘッドのみ、もう1つは行で使用します。次に、overflow-y：auto OR scrollを使用して、高さを固定したdiv内にこのテーブルを配置します。

1
Sanuj

ここでJavaScriptを使用しても大丈夫な場合は、すべての列（ピクセル！）に固定幅のテーブルセットを作成し、テーブルにScrollifyクラスを追加し、このjavascript + jquery 1.4.xをcssまたはスタイルで設定します！

テスト済み：Opera、Chrome、Safari、FF、IE5.5（Epic script fail）、IE6、IE7、IE8、IE9

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
    $("table.Scrollify").each(function (index, element) {
        var header = $(element).children().children().first();
        var headerHtml = header.html();
        var width = $(element).outerWidth();
        var height = parseInt($(element).css("height")) - header.outerHeight();
        $(element).height("auto");
        header.remove();
        var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
                         "</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
                         $(element).parent().html() + "</div>";

        $(element).parent().html(html);
    });
});


//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
        document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

編集：高さを修正しました。

0
Peter

私はjavascript（ライブラリなし）とCSSでこれを行います-テーブル本体はページでスクロールし、テーブルは幅または高さを固定する必要はありません、ただし各列には幅が必要です。 ソート機能を維持することもできます。

基本的に：

  1. HTMLでは、コンテナdivを作成してテーブルヘッダー行とテーブルボディを配置し、「マスク」divも作成して、ヘッダーをスクロールしてテーブルボディを非表示にします

  2. CSSで、テーブルパーツをブロックに変換します

  3. Javascriptで、テーブルの幅を取得し、マスクの幅に合わせます...ページコンテンツの高さを取得します...スクロール位置を測定します... CSSを操作して、テーブルヘッダー行の位置とマスクの高さを設定します

JavaScriptとjsFiddle DEMO。

// get table width and match the mask width

function setMaskWidth() { 
  if (document.getElementById('mask') !==null) {
    var tableWidth = document.getElementById('theTable').offsetWidth;

    // match elements to the table width
    document.getElementById('mask').style.width = tableWidth + "px";
   }
}

function fixTop() {

  // get height of page content 
  function getScrollY() {
      var y = 0;
      if( typeof ( window.pageYOffset ) == 'number' ) {
        y = window.pageYOffset;
      } else if ( document.body && ( document.body.scrollTop) ) {
        y = document.body.scrollTop;
      } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
        y = document.documentElement.scrollTop;
      }
      return [y];
  }  

  var y = getScrollY();
  var y = y[0];

  if (document.getElementById('mask') !==null) {
      document.getElementById('mask').style.height = y + "px" ;

      if (document.all && document.querySelector && !document.addEventListener) {
        document.styleSheets[1].rules[0].style.top = y + "px" ;
      } else {
        document.styleSheets[1].cssRules[0].style.top = y + "px" ;
      }
  }

}

window.onscroll = function() {
  setMaskWidth();
  fixTop();
}
0
Deborah

標準が十分に低い場合は、;）ヘッダーのみを含むテーブルを、本文のみを持つテーブルのすぐ上に配置できます。水平方向にはスクロールしませんが、必要ない場合は...

0
M610

私にとっては、テーブルCSSから幅を削除するまで、スクロールに関連するものは何もありませんでした。元々、テーブルCSSは次のようになりました。

.table-fill {
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    max-width: 800px;
    padding:5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
}

Width：100％を削除するとすぐに。すべてのスクロール機能が機能し始めました。

0
Matthew Park