javascript - colspans を含む固定テーブルヘッダー行を作成する方法は?

Question

データベースデータから作成された大きな動的テーブルがあります。列見出しの行を固定したままにし、必要に応じて行をスクロールする必要があります。

これを適切に機能させるために、ウェブ全体で多数のスクリプトを試しました。一部のターゲットコンピューターはかなり不自由なので、これをブラウザーでシンプルかつ簡単に保ちたいと思います。

これが私が取り組んでいるものです：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Sample</title>
  </head>

  <body>
    <br><br><br><br>

    <table id="A" border="0" width="95%" cellspacing="0" cellpadding="0" align="center" class="base">
      <tr bgcolor='gray'>
        <td>
          <br><br><br>
          need the blue column heading rows to remain fixed, and scroll the green rows:<br>

    <table id="XYZ" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base">
      <thead>

        <tr>
          <th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1a</th>
          <th width="50px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1b</th>
          <th width="75px" bgcolor="DeepSkyBlue" align="center" valign="middle">Col 1c</th>
          <th width="100px" style="border-left:medium solid black;" colspan="3" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 2</th>
          <th width="100px" style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 3</th>
          <th width="150px" style="border-left:medium solid black;" colspan="5" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 4<br>more<br>more</th>
          <th width="100px" style="border-left:medium solid black;" colspan="1" bgcolor="DeepSkyBlue" align="center" valign="middle"><b>Col 5</th>
        </tr>
        <tr>
            <th bgcolor="DeepSkyBlue" colspan="3" align="center" valign="middle">Col 1</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">B</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">C</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center">1</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">4-b</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">4-c</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">4-d</th>
            <th bgcolor="DeepSkyBlue" align="center" valign="middle">4-e</th>
            <th bgcolor="DeepSkyBlue" style="border-left:medium solid black;" align="center">Z</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td bgcolor="PaleGreen" colspan="3" align="center" valign="middle">Col 1<br>more</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[1]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[2]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[3]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[4]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[5]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[6]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[7]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more<br>more</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[8]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[9]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="LimeGreen" align="center" valign="middle">Col 1a</td>
            <td bgcolor="LimeGreen" colspan="2" align="center" valign="middle">Col 1b+c<br>more<br>more</td>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">B</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">C</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="LimeGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="LimeGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[8]" size="3"></th>
        </tr>
        <tr>
            <td bgcolor="PaleGreen" colspan="2" align="center" valign="middle">Col 1a+b</td>
            <td bgcolor="PaleGreen" align="center" valign="middle">Col 1c<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more</td>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">A</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">B</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">C</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center">1</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center" valign="middle">4-a</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-b</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-c</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-d</th>
            <td bgcolor="PaleGreen" align="center" valign="middle">4-e</th>
            <td bgcolor="PaleGreen" style="border-left:medium solid black;" align="center"><input type="text" NAME="b[9]" size="3"></th>
        </tr>
      </tbody>
    </table>

          <br><br><br><br>
        </td>
      </tr>
    </table>

    <br><br><br><br><br><br>

  </body>

</html>

score 20 · Accepted Answer

両方で同じ colgroup 設定を使用して、ヘッダー行をデータ行とは別のテーブルに配置できます。

以下は、IE9、FF14.01、および Chrome 20.0.1132.57 で正常に動作します。

<table border="1">
    <colgroup>
        <td width="100px">Column 1</td>
        <td width="100px">Column 2</td>
        <td width="100px">Column 3</td>
        <td width="16px" style="background-color: gray;"><td>
    </colgroup>
</table>
<div style="position: absolute; height:75px; overflow-y:scroll; overflow-x:auto">
    <table border="1">
        <colgroup>
            <td width="100px"></td>
            <td width="100px"></td>
            <td width="100px"></td>
        </colgroup>
        <tbody>
            <tr>
                <td>Row 1 - Cell 1</td>
                <td>Row 1 - Cell 2</td>
                <td>Row 1 - Cell 3</td>
            </tr>
            <tr>
                // rest omitted, see DEMO for full table
            </tr>
        </tbody>
    </table>
</div>

デモを見る

編集 -- 2012 年 8 月 3 日

私がそれを機能させることができた唯一の方法は、ちょっとしたトリックをうまく使うことでした. 最初の例のようにヘッダーを分離しました。しかし、ヘッダーには非常にカスタム化された複数の異なる幅があるため、すべてを整列させたままにする最も信頼できる方法は、th行を 2 番目のテーブルにもコピーすることでしたが、内部にはテキストはありませんでした。これにより、それらは「非表示」になりましたが、2番目のテーブルの列が期待どおりに整列されました。

デモを見る

少しハックな気がしますが、適切な解決策があると確信していますが、当面はうまくいくようです。

編集 -- 2012 年 8 月 7 日

このテーブル全体を画面幅の最大 100% で「ボックス化」し、height:150px; の高さを変更する方法はありますか? $(window).height()-200 のような、より動的なものに

確かにもっとエレガントな方法がありますが、テーブルをよりダイナミックにすることができました。

min-width: 600px;全体の幅を約 95% に制限し、テーブルをヘッダー用とボディ用にハードキャップしたため、幅はあまり問題になりませんでしたmin-width: 584px。これにより、テーブルが常に整列したままになります。

動的な高さについては、jQuery を使用し、サイズ変更関数をウィンドウのサイズ変更イベントにバインドしました。

$(document).ready(function() {
    resizeTableHeight();

    $(window).on("resize.resizeTableHeight", function() {
        resizeTableHeight();
    });
});

function resizeTableHeight() {
    var headerHeight = $("#tableHeaderContainer").height();
    var documentHeight = $(document).height();
    var spacingHeight = 50;

    $("#tableBodyContainer").height(documentHeight - headerHeight - spacingHeight);
}

フィドルを開くと、フィドルウィンドウの元の高さが高すぎてダイナミクスが表示されない可能性があります。分割線を移動してビューを縮小するだけで、サイズ変更が機能していることを確認できます。

グリッドを表示していないときは、そのイベントをアンバインドすることを忘れないでください。これは、サイズ変更のたびに実行されるためです。

ダイナミックグリッドデモを見る

いくつかのスタイルが css (右上) のフィドルにありますが、他のスタイルはそうではありません。私の CSS はあまり強力ではなく、要素から CSS 領域に移動したときにいくつかのスタイルが無視され始めました。可能な限り CSS に移行し、残りはハードコード化して壊さないようにしました。毎日 CSS を扱っている人なら、きっと解決してくれるはずです。

また、必要に応じて、CSS および jQuery のいくつかの要素にいくつかの ID を追加しました。
CSSの場合、代わりにクラスを使用できると思います。私はそれをあなたに任せます。

要約
あなたが望むものを達成するためのよりエレガントな方法があり、おそらくいくつかのスクリプトウィズがプラグインを入手したと確信しています。それまではこれでうまくいくようです。また、列に大量の長いデータが入力された場合、列が再び 600 ピクセル近くでずれ始める可能性がありますが、前述のように、これは非常にパーソナライズされたソリューションであり、幅によっては動的計算を追加する必要がある場合があります。時間の経過とともに jQuery を使用します。

編集 -- 2012 年 8 月 9 日

コメントで言及した td の幅の設定について。私が言及したクラスを使用して、最初の列の長いテキストの問題を修正しました。IE、FF、Chrome で動作します。

デモを見る

コメントに記載されているロジックを使用しました。もっと良い命名規則が見つかるかもしれません。メイン列とサブ列ごとのオン/オフスイッチを使用しただけです。これは、列 1 のスタイルでは次のようになります。

.col01-000{
    width: 0px;
}
.col01-001{
    width: 75px;
}
.col01-010, .col01-100{
    width: 50px;
}
.col01-011, .col01-101{
    width: 125px;
}
.col01-110{
    width: 100px;
}

最初の td にcol01-100を意味するクラスを割り当てました50px。
2 番目の td のクラスはcol01-011になりました。これは、この td がまだ最初のメイン列に属しているが、サブ列 2 (50px) と 3 (75px) の幅を持っていることを示しています。これは合計で 125px になります。

これが理にかなっていることを願っていますが、そうでない場合は、喜んでチャットで議論を続け、それがあなたが適用したいものであるかどうかを測定します.

これまでのところ、測定値は次のようになります。

Col01

Col1 = 175px 以上の colspan 3
次のように 175px を分割する 3 つのサブ列: 50px-50px-75px

Col02

Col2 = colspan 3 100px 以上
次のように 100px を分割する 3 つのサブ列: 40px-30px-30px

Col03

Col3 = 100px 以上の colspan 1
サブ列なし

Col04

Col4 = colspan 5 150px 以上
次のように 150px を分割する 5 つのサブ列: 30px-30px-30px-30px-30px

Col05

Col5 = 100px 以上の colspan 1
サブ列なし

score 11 · Accepted Answer

編集：ウィンドウのサイズ変更時の固定位置を修正：

http://jsfiddle.net/eReBn/13/

完全なコード:

$(function() {
    (function($) {
        $.fn.fTable = function(o) {

            var tableTmpl = '<table id="XYZ_fixed" border="1" width="625" cellspacing="0" cellpadding="0" align="center" class="base"></table>';

            this.wrap('<div class="fTable_container" />');
            var fc = this.parent();
            fc.css('width', this.width() + 18);

            this.wrap('<div class="fTable_rContainer" />');
            var rc = this.parent();
            rc.css('height', o.height);

            var fTable = $(tableTmpl);
            fTable
             .addClass('fTable_fixedHead')
             .html(this.find('thead').clone())
             .prependTo(rc);

            $(window).on('scroll resize', function () {
                console.log(isScroll());
                if (isScroll()) {
                    fTable.css('left', $(this).scrollLeft() * -1);
                } else {
                    fTable.css('left', '');
                }
            });
        };

        function isScroll() {
           var root= document.compatMode=='BackCompat'?
               document.body : document.documentElement;
            return root.scrollWidth>root.clientWidth;
        }

    })(jQuery);

    $('#XYZ').fTable({
        height: 300
    });
});

編集:以下の解決策を試してください..スタイルを手動で追加してテーブルを調整しても大丈夫だったので.

デモ: http://jsfiddle.net/eReBn/12/embedded/result/

マニュアル：

を。以下の CSS をスタイルシートにコピーします。

.fTable_rContainer {
    position: relative;
    overflow: auto;    
    height: 300px; /* Height of the table */
}

.fTable_container {
    width: 643px;  /* Total width of the table you set + 18px (scroll size) */
}

.fTable_fixedHead {
    position: fixed; 
}

b. テーブルを div でラップするclass="fTable_container"

c. 元のテーブルの一部をコピーしthead、DEMO のように新しいテーブルに移動します。

d. クラスfTable_fixedHeadを新しいテーブルに追加する

いくつかのスクリプトで自動化:

デモ: http://jsfiddle.net/eReBn/11/embedded/result/

2つのテーブルを使用して解決しようとしましたが、

元のテーブル (手付かず)
元のテーブルの上に固定ヘッダーテーブル (絶対配置)

それをチェックして、気に入ったら教えてください。

デモ

Firefox と Chrome でテスト済み。[今日、他のブラウザでテストします]

完全なコード @ http://jsfiddle.net/eReBn/7/

JS:

$(function() {
   (function($) {
     $.fn.fTable = function(o) {
        /* Preserve the attr list from original table    */
        var el = this[0], arr = [], it;
        for (var i = 0, attrs = el.attributes, l = attrs.length; i < l; i++) {

          it = attrs.item(i);

          if (it.nodeName == 'id') {
           arr.push(it.nodeName + '="' + it.nodeValue + '_fixed"');
          } else {
           arr.push(it.nodeName + '="' + it.nodeValue + '"');
          }
        }

        var tableTmpl = '<table ' + arr.join(' ') + '></table>';

        /* Wrap it inside div's */
        this.wrap('<div class="fTable_container" />');
        this.wrap('<div class="fTable_rContainer" />');

        var rc = this.parent();

        /* Clone the thead and add it to the fixed table head */
        $(tableTmpl)
          .addClass('fTable_fixedHead')
          .html(this.find('thead').clone())
          .prependTo(rc);

        /* Position the fixed head table on scroll */
        rc.scroll(function() {
          rc.find('.fTable_fixedHead').css('top', $(this).scrollTop());
        });

        var _that = this;
        rc.find('.fTable_fixedHead').css('left', _that.aPosition().left);

        /* Position the left on resize*/
        $(window).resize(function() {
          rc.find('.fTable_fixedHead').css('left', _that.aPosition().left);
        });
     };

     /* Position fix for webkit browsers */
     jQuery.fn.aPosition = function() {
        thisLeft = this.offset().left;
        thisTop = this.offset().top;
        thisParent = this.parent();
        parentLeft = thisParent.offset().left;
        parentTop = thisParent.offset().top;
        return {
           left: thisLeft - parentLeft,
           top: thisTop - parentTop
        }
     }
  })(jQuery);

});

使用法：

$('#XYZ').fTable({
    height: 300
});

score 6 · Accepted Answer

DataTables.netを使用して、非常によく似た問題をうまく解決しました。これは、高度な複数行ヘッダーを使用した Web サイトの例です。サブ列のカテゴリ内で並べ替えることもできます。

score 6 · Accepted Answer

私はあなたにオプションを提供することもできます。これは、ブラウザウィンドウがスクロールされていることを前提としています。

ここでの考え方は、テーブルのクローンが作成され、それ以外のすべてがthead取り除かれることです。ビューポートの上部に固定され、非表示になっています。

ユーザーがテーブルの上部をスクロールすると、複製されたテーブルが表示されます。resizeビューポートの幅の変更を処理するイベントも含めました。固定されたヘッダーとテーブルを水平方向に揃えるためにいくつかの小さな問題がありますが、大きな問題ではありません。

テーブルをソースとして使用したデモを次に示します (読みやすくするために、多くのインラインスタイルを CSS に移動しました)。

jsFiddle デモ

$(function(){
    var $window = $(window),
        stickyTable = $('#XYZ'),
        stickyHeader = stickyTable.clone(true),
        tableTop = stickyTable.offset().top,
        isSticky = false;

    handleScroll();

    $window.on({
        scroll: handleScroll,
        resize: handleResize
    });


    stickyHeader.find('tbody').remove();
    stickyHeader.find('tfoot').remove();

    stickyHeader.addClass('sticky-header').appendTo('body');

    function handleScroll() {
        var scrollTop = $window.scrollTop();

        if(scrollTop > tableTop && !isSticky) {
            stickyHeader.css('left',stickyTable.offset().left+'px').show();
            isSticky = true;
        } else if(scrollTop <= tableTop && isSticky) {
            stickyHeader.hide();
            isSticky = false;
        }
    }

    function handleResize() {
        if(isSticky) {
            stickyHeader.css('left',stickyTable.offset().left+'px');
        }
    }
});

score 4 · Accepted Answer

以前に書かれた答えのいくつかは素晴らしかったです！

Javascriptをオンザフライでデバッグし、cssをリアルタイムで調整するための優れたChrome Developerツールがあるため、私はほとんどの場合GoogleChromeでこれをテストしました。

クローン関数を含むjQueryを追加すると、ページの高さに押しつぶさずにスクロール可能なテーブルを実現でき、必要な場所にフローティングテーブルヘッダーを配置できます。

次のコードは、テーブルヘッダーのクローンを作成します。

jQuery(document).ready(function () {
    jQuery("body").append("<table class='tableheader' align='center' border='1' width='625' cellspacing='0' cellpadding='0'></table>");
    jQuery(".tableheader").append(jQuery(".base2 thead").clone());

次に、静的変数を設定し、スクロールイベントをキャッチする必要があります。

var headerToMove = jQuery(".tableheader");
var headerOffsetTop = headerToMove.offset().top;
var headerPosition = headerToMove.position();

jQuery(window).scroll(function () { scroll_post_header(); });

次に、ヘッダーを現在のヘッダーの上で上下に移動しますが、現在のヘッダーが邪魔にならないようにスクロールする場合は、ページの上部に保持します。

    function scroll_post_header() {
        var new_position = headerOffsetTop - jQuery(window).scrollTop();
        if (new_position < 0) { new_position = 0;}
        if (headerPosition.top != new_position) {
            headerToMove.css("top",new_position);
            //headerToMove.stop().animate({ 'top': new_position }, 300);
        }
        if (jQuery(window).scrollTop() < 15) { headerToMove.css("top",headerOffsetTop);}
    }
});

次に、クローンを作成するヘッダーに初期CSSを追加します。現在のヘッダーが上から来るスイートスポットを見つける必要がありますが、これでもjQueryの問い合わせによって実現できます。

.tableheader {
    position: fixed;
    height: 80px;
    top: 160px;
    left: 2.5%;
    z-index: 1000;    
}

完全に機能する例は、http：//jsfiddle.net/webwarrior/YZ8cJ/142/にあります。

これがhtmlを変更せずにいくらか役立つことを願っています。

score 3 · Accepted Answer

私はあなたのための考えを持っています。テーブルを2つのテーブルに分割します。それらの1つはヘッダーとして機能し、2つ目はすべてのセルと行の残りの部分として機能します。次の秘訣：2つの固定幅と高さのdivを垂直に配置します。上の方がヘッダーテーブルをロードし、下の方がテーブル本体に機能します。下のdivで、垂直オーバーフローを設定します。このようにして、データのスクロールによるヘッダーの移動をサポートする簡単なソリューションが得られます。

score 3 · Accepted Answer

このフィドルをチェック

これがコードです。すべてのブラウザで正常に動作しています...!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Scrollable Table with Fixed Header</title>
<meta http-equiv="language" content="en-us">

<script type="text/javascript">
    function removeClassName (elem, className) {
        elem.className = elem.className.replace(className, "").trim();
    }

    function addCSSClass (elem, className) {
        removeClassName (elem, className);
        elem.className = (elem.className + " " + className).trim();
    }

    String.prototype.trim = function() {
        return this.replace( /^\s+|\s+$/, "" );
    }

    function stripedTable() {
        if (document.getElementById && document.getElementsByTagName) {  
            var allTables = document.getElementsByTagName('table');
            if (!allTables) { return; }

            for (var i = 0; i < allTables.length; i++) {
                if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
                    var trs = allTables[i].getElementsByTagName("tr");
                    for (var j = 0; j < trs.length; j++) {
                        removeClassName(trs[j], 'alternateRow');
                        addCSSClass(trs[j], 'normalRow');
                    }
                    for (var k = 0; k < trs.length; k += 2) {
                        removeClassName(trs[k], 'normalRow');
                        addCSSClass(trs[k], 'alternateRow');
                    }
                }
            }
        }
    }

    window.onload = function() { stripedTable(); }
</script>

<style type="text/css">

body {
    background: #FFF;
    color: #000;
    font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 10px;
    padding: 0
}

table, td, a {
    color: #000;
    font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}

h1 {
    font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0 0 5px 0
}

h2 {
    font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0 0 5px 0
}

h3 {
    font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #008000;
    margin: 0 0 15px 0
}

div.tableContainer {
    clear: both;
    border: 1px solid #963;
    height: 285px;
    overflow: auto;
    width: 756px
}

html>body div.tableContainer {
    overflow: hidden;
    width: 756px
}

div.tableContainer table {
    float: left;
    width: 740px
}

html>body div.tableContainer table {
    width: 756px
}

thead.fixedHeader tr {
    position: relative
}

html>body thead.fixedHeader tr {
    display: block
}

thead.fixedHeader th {
    background: #C96;
    border-left: 1px solid #EB8;
    border-right: 1px solid #B74;
    border-top: 1px solid #EB8;
    font-weight: normal;
    padding: 4px 3px;
    text-align: left
}

thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
    color: #FFF;
    display: block;
    text-decoration: none;
    width: 100%
}

thead.fixedHeader a:hover {
    color: #FFF;
    display: block;
    text-decoration: underline;
    width: 100%
}

html>body tbody.scrollContent {
    display: block;
    height: 262px;
    overflow: auto;
    width: 100%
}

tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
    background: #FFF;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #CCC;
    border-top: 1px solid #DDD;
    padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
    background: #EEE;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #CCC;
    border-top: 1px solid #DDD;
    padding: 2px 3px 3px 4px
}

html>body thead.fixedHeader th {
    width: 200px
}

html>body thead.fixedHeader th + th {
    width: 240px
}

html>body thead.fixedHeader th + th + th {
    width: 316px
}


html>body tbody.scrollContent td {
    width: 200px
}

html>body tbody.scrollContent td + td {
    width: 240px
}

html>body tbody.scrollContent td + td + td {
    width: 300px
}
</style>
</head><body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
    <tr class="alternateRow">
        <th><a href="">Header 1</a></th>
        <th><a href="">Header 2</a></th>
        <th><a href="">Header 3</a></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>
</div>
</body></html>

score 3 · Accepted Answer

ヘッダーが固定された HTML テーブルをチェックアウトしますか? . これは、「テーブルヘッダーをフリーズするにはどうすればよいですか?」という一般的な質問に対する最良の回答です。

score 3 · Accepted Answer

私はいつもこの非常に使いやすいプラグインを使用しており、それを次のように簡単に処理できます$('#tableID').fixedtableheader();

驚くほど機能し、非常に軽量で柔軟です。

http://fixedheadertable.com/

score 2 · Accepted Answer

これについては、2 つのテーブルを使用するのが最善の方法のようです。ヘッダーのある外側のテーブルと、その中に内側のテーブルがある 1 つの大きな行。div は css でオーバーフローする必要があります: scroll または auto で高さを設定します (css または javascript を使用)。すべての列に特定の幅を設定する必要があります。これを行う最善の方法は、ヘッダーごとにクラスを指定し、内部テーブルの対応する列に同じクラスがあることを確認することだと思います。

<table>
    <tr><th>...</th></tr>
    <tr><td>
            <div><inner table></div>
    </td></tr>
</table>

例については、こちらをご覧ください: http://www.cssplay.co.uk/menu/tablescroll.html

score 1 · Accepted Answer

非常に迅速で大雑把ですが、アイデアが得られることを願っていますposition:fixed。jsfiddle: http://jsfiddle.net/b3S5F/

javascript - colspans を含む固定テーブル ヘッダー行を作成する方法は?

12 に答える 12

Related

Reference

javascript - colspans を含む固定テーブルヘッダー行を作成する方法は?