61

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

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

素晴らしい jQuery プラグインがあれば! それが役立つ場合、私が気にかけている唯一のブラウザーは Firefox です。

4

13 に答える 13

19

pranav によって投稿されたリンクの実際の例:

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

参考: IE 6、7、および 8 (互換モードのオンまたはオフ)、FF 3 および 3.5、Chrome 2 でテスト済み。スクリーン リーダーに対応していません (ヘッダーはコンテンツ テーブルの一部ではありません)。

EDIT 5/5/14: 例を jsBin に移動しました。これは古いものですが、現在の Chrome、IE、および Firefox でも驚くほど機能します (ただし、IE と Firefox では行の高さを調整する必要がある場合があります)。

于 2009-08-20T15:27:37.063 に答える
2

あなたはこれを探しているかもしれません。

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

于 2009-04-03T15:05:04.347 に答える
2

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

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

構成なしで機能し、セットアップは非常に簡単です。

于 2010-08-13T14:43:39.680 に答える
1

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

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

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

于 2010-08-24T17:21:47.307 に答える
0

固定ヘッダー、固定フッター、固定左列、固定右列を持つものを作成しました。これは IE でのみ正常に動作します。ほとんどのユーザーがまだ IE を使用しているため、これは役に立ちます。コードはScrollable Tableにあります。あなたの提案を聞かせてください。

その間、他のブラウザで列を修正する作業を行っています。お知らせします。:-)

于 2010-09-29T20:30:24.190 に答える
0 
<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>
于 2011-10-28T18:37:55.787 に答える
0

完璧ではありませんが、ここでのいくつかの上位の回答よりも近づきました.

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>
于 2012-02-27T04:05:35.923 に答える
-2

MSIEでできることは知っていますが、この限定された例はfirefoxでも機能するようです（この手法がどれほど拡張可能かはわかりません）。

于 2009-03-26T01:45:54.447 に答える
-2

YUI データテーブル

YUI DT にこの機能があるかどうかはわかりませんが、あっても驚かないでしょう。

于 2009-03-26T09:46:17.833 に答える
-2

最初の列には、ヘッダーのすぐ下のセルにスクロールバーがあります

<table>
    <thead>
        <th> Header 1</th>
        <th> Header 2</th>
        <th> Header 3</th>
    </thead>
    <tbody>
        <tr>
            <td>
                <div style="width: 50; height:30; overflow-y: scroll"> 
                    Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk 
                    fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
                </div>
            </td>
            <td>
                Hello world
            </td>
            <td> Hello world2
        </tr>
    </tbody>
</table>
于 2009-03-26T02:00:50.107 に答える
-3

これは、すべてのブラウザーで動作する優れた jQuery プラグインです。

幅を固定せずにヘッダーテーブルを固定しています。

確認してください: https://github.com/benjaminleouzon/tablefixedheader

免責事項: 私はプラグインの作成者です。

于 2010-08-23T07:44:17.227 に答える