HTML テーブルで固定ヘッダーと固定列を実現するにはどうすればよいですか?

HTML テーブルで固定ヘッダーと固定列を実現する

Web 開発では、スクロールが必要な場合に大きな HTML テーブルを表示するのが困難になることがあります。重要な情報の可視性を維持します。幸いなことに、CSS と JavaScript のテクニックを組み合わせることで、画面上部の列ヘッダーを固定し、テーブル データをスクロールするときに最初の列を固定したままにすることで解決策を提供できます。

効果的なアプローチの 1 つは、実際の例では、CSS 属性position:sticky を使用して列ヘッダーを所定の位置に固定する方法が示されています。このプロパティを top に設定すると、スクロール中にヘッダーが画面の上部に表示されたままになります。

最初の列を固定するには、JavaScript プラグイン「stickyTableHeaders」を使用できます。このプラグインは、最初の列のコンテンツのクローンを作成し、CSS トリックを使用して配置して、目的の固定効果を実現します。

これを実装する方法の例を次に示します。

<code class="html"><table id="myTable">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table data -->
  </tbody>
</table></code>

<code class="css">#myTable {
  width: 100%;
  border-collapse: collapse;
}

#myTable thead {
  position: sticky;
  top: 0;
}</code>

<code class="javascript">// Use the stickyTableHeaders plugin to fix the first column
$('#myTable').stickyTableHeaders();</code>

これらの手法を組み合わせることで、固定ヘッダーと固定列を備えた HTML テーブルを作成し、スクロール中に重要な情報が表示されたままにすることができます。

以上がHTML テーブルで固定ヘッダーと固定列を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。