web-dev-qa-db-ja.com

HTML固定ヘッダーテーブルスクロールバー

可能性のある複製：
ヘッダーが固定されたHTMLテーブル？

ヘッダーが固定されたHTMLテーブルからスクロールバーを取得する方法をいくつか試しましたが、運がありませんでした。ヘッダーがテーブル本体に何らかの形で「アタッチ」されるソリューションが必要だと思います（典型的なネストされたテーブルソリューションではなく）。私が試したすべての解決策は、ヘッダー列と本文列の幅を台無しにしました。言い換えれば、それらは同期しなくなり、ヘッダーの列はスクロールテーブルの列と適切に整列しません。ヘッダーと列の幅は列ごとに異なります。

これを達成する方法はありますか？ JavaScriptを使用したくないです。ああ、これはInternet Explorerでも機能するために必要です。

Update：この機能を取得することは非常に重要です。 both列と行ヘッダーの固定ヘッダーが必要です。これまでのところ、適切に機能するソリューションはありません。ヘッダーを別々のテーブルにすることを検討しましたが、ヘッダーが固定されたままになるので、スクロールするときには機能しません。

固定HTMLヘッダーには多くのユースケースがあるように思われるので、適切な解決策がないことは驚きです。

（ああ、リンクでopatutによって提案されたオプションを試しましたが、すべてのブラウザーで機能しないため、Internet Explorer、Firefox、Chromeでこの作業が必要です。InternetExplorer 6で機能しない場合は問題ありません） 。

ああ、列の幅や行の高さを修正する必要がある場合でも、それで問題ありません。動作する固定ヘッダーHTMLテーブル（クロスブラウザー）があればうれしいです。

htmlscrollhtml-table
23
aeq

私は純粋なCSSソリューションであり、テーブルを通常の可変幅​​にすることができるソリューションを持っています。これは新しいソリューションであり、ヘッダーの設計に応じていくつかの問題があります。良いニュースは、ヘッダーが左揃えの場合、または列の幅が固定されている場合は問題ありません。 IE6にはいくつかの視覚的なバグがあり、一部のセルでは、列のコンテンツがヘッダーよりも幅が狭い場合にヘッダーを表示するために最小幅が必要であることがわかりました。すべての問題は視覚的であるため、見栄えが良ければ完了です。テーブルの本文は完全に正常であり、JavaScriptがないため、ユーザーがページのサイズを変更しても何もする必要はありません。

私のソリューションをチェックしてコメントを残してください http://salzerdesign.com/blog/?p=191

11
Miriam Salzer

あなたはJavascriptを避けようとしていることは知っていますが、私はあなたとまったく同じボートに乗っていて（新しいアプリケーションの正確な挑戦で何日も何をすべきかに苦労しています）、Datatablesを見つけたら約10分で問題を解決しました：

ソリューションの実例： http://www.datatables.net/examples/basic_init/scroll_y.html

常にヘッダーとボディの列を幅方向に完全に一致させます。幅を指定することもできますが、サイズを自動調整するのに十分インテリジェントです。列の強調表示とソートは、提供されているサンプルCSSを使用してデフォルトでサポートされています。ページ分割されたモデル（最終的に使用したもの）への切り替えは、1行のコードです。そして....最良の部分-ユーザーがJavascriptを有効にしていないのではないかと心配している場合、標準準拠のHTMLテーブルに完全に戻ってしまいます。私見、それはIEを完全にサポートする最も苦痛がなく、最も機能豊富なソリューションです。

気分が良くなる場合は、政府（軍事）サイトと国際銀行のWebサイトの両方でこのソリューションを使用しました。結果に非常に満足しています。

5
bpeterson76

私の最初の答えはbothヘッダーとカラムを修正しようとしませんでした。以下は、すべての典型的なブラウザで動作するはずの例です（ただし、微調整が必​​要な場合があります）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

  <style>
    th { text-align: center; border: 1px solid black; padding:3px; }
    td { text-align: center; border: 1px solid black; padding:3px; }
    th.c1, td.c1 { width: 100px; }
    th.c2, td.c2 { width: 150px; }
    th.c3, td.c3 { width: 60px; }
    th.c4, td.c4 { width: 100px; }
    th.c5, td.c5 { width: 150px; }
    th.c6, td.c6 { width: 60px; }

    #rowScroll { height: 100px; } /* Subtract the scrollbar height */
    #contentScroll { height: 100px; width: 300px; }
    #colScroll { width: 272px; } /* Subtract the scrollbar width */
  </style>

    <table cellspacing="0" cellpadding="0" style="float: left;" style="width:300px; height:100px;" >
      <tr>
        <td id="void" style="border: 0;">
        </td>
        <td id="rowHeaders" style="border: 0;">
          <div id="colScroll" style="overflow-x:hidden;">
            <table cellspacing="0" cellpadding="0" style="width: 600px;">
              <tr>
                <th class="c1">A</th>
                <th class="c2">B</th>
                <th class="c3">C</th>
                <th class="c4">D</th>
                <th class="c5">E</th>
                <th class="c6">F</th>
              </tr>
            </table>
          </div>
        </td>
      </tr>
      <tr>
        <td id="colHeaders" style="border: 0;">
          <div id="rowScroll" style="overflow-y:hidden">
            <table cellspacing="0" cellpadding="0">
              <tr><td>R1</td></tr>
              <tr><td>R2</td></tr>
              <tr><td>R3</td></tr>
              <tr><td>R4</td></tr>
              <tr><td>R5</td></tr>
              <tr><td>R6</td></tr>
              <tr><td>R7</td></tr>
              <tr><td>R8</td></tr>
              <tr><td>R9</td></tr>
            </table>
          </div>
        </td>
        <td id="content" style="border: 0;">
          <div id="contentScroll" style="overflow:auto">
            <table cellspacing="0" cellpadding="0" style="width: 600px;">
              <tr><td class="c1">A1</td><td class="c2">B1</td><td class="c3">C1</td><td class="c4">D1</td><td class="c5">E1</td><td class="c6">F1</td></tr>
              <tr><td class="c1">A2</td><td class="c2">B2</td><td class="c3">C2</td><td class="c4">D2</td><td class="c5">E2</td><td class="c6">F2</td></tr>
              <tr><td class="c1">A3</td><td class="c2">B3</td><td class="c3">C3</td><td class="c4">D3</td><td class="c5">E3</td><td class="c6">F3</td></tr>
              <tr><td class="c1">A4</td><td class="c2">B4</td><td class="c3">C4</td><td class="c4">D4</td><td class="c5">E4</td><td class="c6">F4</td></tr>
              <tr><td class="c1">A5</td><td class="c2">B5</td><td class="c3">C5</td><td class="c4">D5</td><td class="c5">E5</td><td class="c6">F5</td></tr>
              <tr><td class="c1">A6</td><td class="c2">B6</td><td class="c3">C6</td><td class="c4">D6</td><td class="c5">E6</td><td class="c6">F6</td></tr>
              <tr><td class="c1">A7</td><td class="c2">B7</td><td class="c3">C7</td><td class="c4">D7</td><td class="c5">E7</td><td class="c6">F7</td></tr>
              <tr><td class="c1">A8</td><td class="c2">B8</td><td class="c3">C8</td><td class="c4">D8</td><td class="c5">E8</td><td class="c6">F8</td></tr>
              <tr><td class="c1">A9</td><td class="c2">B9</td><td class="c3">C9</td><td class="c4">D9</td><td class="c5">E9</td><td class="c6">F9</td></tr>
            </table>
          </div>
        </td>
      </tr>
    </table>

  <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    var content = $("#contentScroll");
    var headers = $("#colScroll");
    var rows = $("#rowScroll");
    content.scroll(function () {
      headers.scrollLeft(content.scrollLeft());
      rows.scrollTop(content.scrollTop());
    });
  </script>
</body>
</html>
2
John Fisher

私のソリューションを試してください。バグがなく、パフォーマンスが最適化されています（機能を犠牲にしません）。

http://code.google.com/p/js-scroll-table-header/

あなたがそれを試して助けを必要とするなら、ただ尋ねてください、私は著者です。

2
raveren

ここに直接入れるのは少々コードが多すぎますが、結局のところ、これにはかなりのCSSが必要になります。 javascriptとjQueryを使用するとそれを軽減できるため、両方のメソッドへのリンクを含めます。

HTML + CSSのみ

このページ のソースを使用して、CSSおよびHTMLを介して求めていることを正確に行う方法の例をコピーできます。これは、ほとんどすべての現在のブラウザー（Opera 7.x + (All Platforms), Mozilla 1.x + (All Platforms), IE 6.x + (Windows), Safari 1.x + (MacOS), Konqueror 3.x + (Linux / BSD)）で動作すると報告されていますが、IE 5.xに戻る必要がある場合、失敗し始めます。

Javascript/jQuery

JavascriptとjQueryを含めることにオープンであると判断した場合、実装が少し簡単に見える2番目のオプションがあります。 このブログ記事 方法を示します。

1
Jeffrey Blake

私が見つけたのは、セルの幅と高さの固定値が必要なため、それを動的に保ちたい場合、JavaScriptにこだわっています。

私が気に入っている解決策の1つはこれですが、列ごとに幅を定義する必要があります。 "大きなHTMLテーブルのヘッダーを修正at The Code Project .

JavaScriptを使用したくない場合は、PHPで固定列幅を設定できます。列幅を取得するために、セルの平均文字列長を決定します。

column_width = column_average / (all_cells_average * column_count) * table_width
1
opatut

JavaScriptなしで DataTables を使用できます。並べ替えはありませんが、それらをホストしているテーブル、ヘッダー、divは動作します。ページのソースを見てください-3つのdivがあり、それぞれが同じ幅のth​​eadのテーブルを持っています。上部と下部はヘッダーとフッターを提供し、中央のものはデータを提供します。実際には、これらの部分を分離する必要があるという元の考えにかなり近いです。

0
ZXX