web-dev-qa-db-ja.com

固定ヘッダーと固定列を持つHTMLテーブル？

列ヘッダーが画面上で固定され、最初の列が固定されたままでデータとともにスクロールするように、長いHTMLテーブルを表示するCSS/JavaScriptテクニックはありますか。

テーブルの内容をスクロールできるようにしたいが、常に上部の列ヘッダーと左側の最初の列を表示できるようにします。

素晴らしいjQueryプラグインがあれば！役立つのはFirefoxだけです。

javascripthtmlcsshtml-table
57
koogunmo

pranavが投稿したリンク の動作例：

http://jsbin.com/nolanole/1/edit?html,js,output

参考：IE 6、7、および8（互換モードのオンまたはオフ）、FF 3および3.5、Chrome 2.非スクリーンリーダー-フレンドリー（ヘッダーはコンテンツテーブルの一部ではありません）。

編集5/5/14：サンプルをjsBinに移動しました。これは古いですが、驚くべきことに現在のChrome、IE、Firefoxではまだ動作します（ただしIEおよびFirefoxは行の高さを調整する必要があるかもしれません）。

19
acatalept

jQuery DataTablesプラグインは、Excelに似た固定列とヘッダーを実現する優れた方法の1つです。

サイトの例セクションと「エクストラ」に注意してください。
http://datatables.net/examples/
http://datatables.net/extras/

「追加」セクションには、固定列および固定ヘッダー用のツールがあります。

固定列
http://datatables.net/extras/fixedcolumns/
（このページの例は、あなたの質問に最も適していると思います。）

固定ヘッダー
http://datatables.net/extras/fixedheader/
（全ページのスプレッドシートスタイルのレイアウトの例を含む： http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html ）

3
mg1075

this を探しているかもしれません。

ただし、いくつかの既知の問題があります。

2
green_t

これは古い質問ですが、私自身のスクリプトをプラグインするのに非常に良い場所です。

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

設定なしで機能し、セットアップは本当に簡単です。

2
raveren

テーブル内のデータが垂直にスクロールしている間、ヘッダーを配置したい場合は、次のように「overflow-y：auto」スタイルの<tbody>を実装する必要があります。

<table>
  <thead>
    <tr>
      <th>Header1</th>
       . . . 
    </tr>
   </thead>
   <tbody style="height: 300px; overflow-y: auto"> 
     <tr>
       . . .
     </tr>
     . . .
   </tbody>
 </table>

<tbody>コンテンツが目的の高さよりも高くなると、スクロールが開始されます。ただし、スクロール位置に関係なく、ヘッダーは上部に固定されたままになります。

1
levik

この回答には、あなたの質問に対して見つけた最良の回答もあります。

ヘッダーが固定されたHTMLテーブル？

そして純粋なCSSに基づいています。

1
Marco Demaio

ヘッダー、フッター、左列、右列を修正したものを作成しました。これはIEでのみ正常に機能します。ほとんどのユーザーはまだIEを使用しています。これは役に立ちます。 Scrollable Table でコードを見つけてください。ご意見をお聞かせください。

その間、私は他のブラウザの列を修正するために働いています。投稿し続けます。 :-)

0
Shahib

完璧ではありませんが、ここでのトップの回答のいくつかよりも近くなりました。

2つの異なるテーブル、1つはヘッダー付き、もう1つはコンテンツ付きのdivでラップ

<table>
  <thead>
    <tr><th>Stuff</th><th>Second Stuff</th></tr>
  </thead>
</table>
<div style="height: 600px; overflow: auto;">
  <table>
    <tbody>
      //Table
    </tbody>
  </table>
</div>
0
Ascherer
<script>
   $(document).ready(function () {
   $("#GridHeader table").html($('#<%= GridView1.ClientID %>').html());
   $("#GridHeader table tbody .rows").remove();
   $('#<%= GridView1.ClientID %> tr:first th').hide();
});
</script>

<div id="GridHeader">
    <table></table>
</div>

<div style="overflow: auto; height:400px;">
    <asp:GridView ID="GridView1" runat="server" />
</div>
0
Pat