列ヘッダーが画面上で固定され、最初の列が固定されたままでデータとともにスクロールするように、長いHTMLテーブルを表示するCSS/JavaScriptテクニックはありますか。
テーブルの内容をスクロールできるようにしたいが、常に上部の列ヘッダーと左側の最初の列を表示できるようにします。
素晴らしいjQueryプラグインがあれば!役立つのはFirefoxだけです。
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は行の高さを調整する必要があるかもしれません)。
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 )
this を探しているかもしれません。
ただし、いくつかの既知の問題があります。
これは古い質問ですが、私自身のスクリプトをプラグインするのに非常に良い場所です。
http://code.google.com/p/js-scroll-table-header/
設定なしで機能し、セットアップは本当に簡単です。
テーブル内のデータが垂直にスクロールしている間、ヘッダーを配置したい場合は、次のように「overflow-y:auto」スタイルの<tbody>を実装する必要があります。
<table>
<thead>
<tr>
<th>Header1</th>
. . .
</tr>
</thead>
<tbody style="height: 300px; overflow-y: auto">
<tr>
. . .
</tr>
. . .
</tbody>
</table>
<tbody>コンテンツが目的の高さよりも高くなると、スクロールが開始されます。ただし、スクロール位置に関係なく、ヘッダーは上部に固定されたままになります。
ヘッダー、フッター、左列、右列を修正したものを作成しました。これはIEでのみ正常に機能します。ほとんどのユーザーはまだIEを使用しています。これは役に立ちます。 Scrollable Table でコードを見つけてください。ご意見をお聞かせください。
その間、私は他のブラウザの列を修正するために働いています。投稿し続けます。 :-)
完璧ではありませんが、ここでのトップの回答のいくつかよりも近くなりました。
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>
<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>