ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript で最初の行と列がロックされたスクロール可能なテーブルを作成する方法

JavaScript で最初の行と列がロックされたスクロール可能なテーブルを作成する方法

Susan Sarandon
Susan Sarandonオリジナル
2024-11-01 23:57:29385ブラウズ

How to Create a Scrollable Table with Locked First Row and Column in JavaScript?

スクロール可能なテーブルの最初の行と最初の列をロックする

このクエリでは、ユーザーは次のように、最初の行と最初の列がロックされたテーブルを作成することを目的としています。 Excel の「ペインの固定」機能。テーブルでは水平スクロールと垂直スクロールの両方が可能である必要があります。

これを実現するには、CSS だけでは不十分な場合があり、JavaScript ソリューションの検討が必要になります。推奨される解決策の 1 つは、「fixed-table-rows-cols」と呼ばれる JavaScript プラグインです。

Fixed-Table-Rows-Cols プラグイン

このプラグインは、書式設定された HTML テーブルをスクロール可能なテーブルに変換します。固定のテーブルヘッダーと列。最初の行と列のロックが有効になります。

使用法:

$('#myTable').fxdHdrCol({
    fixedCols    : 3,       // Number of fixed columns
    width        : "100%",  // Width of the container
    height       : 500      // Height of the container
});

利点:

  • 列とヘッダーの柔軟なロックが可能
  • さまざまなテーブル サイズをサポート
  • 主要な Web ブラウザで動作

詳細とライブ デモについては、プラグインの GitHub にアクセスしてくださいリポジトリ: https://github.com/meetselva/fixed-table-rows-cols

以上がJavaScript で最初の行と列がロックされたスクロール可能なテーブルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。