水平スクロールバーと垂直スクロールバーの両方を備えた固定ヘッダー テーブルを作成するにはどうすればよいですか?

の水平スクロールバーと垂直スクロールバーを備えたヘッダー テーブルを修正しました:

水平および垂直スクロールバーを備えた固定ヘッダー テーブルは、両方のスクロールバーが必要な場合に困難になる可能性があります。この問題は、外側のコンテナが絶対位置に配置されている場合に発生します。これにより、垂直スクロールバーがヘッダーと干渉し、ヘッダーを所定の位置に固定できなくなる可能性があります。

HTML:

HTMLの構造は比較的簡単:

<div class="outer-container">
  <div class="inner-container">
    <div class="table-header">...</div>
    <div class="table-body">...</div>
  </div>
</div>

CSS:

CSS スタイルは外側のコンテナを絶対的に配置し、オーバーフローするコンテンツを処理します:

.outer-container {
  position: absolute;
  overflow: hidden;
}

.inner-container {
  overflow-x: scroll;
}

.table-header {
  position: absolute;
  width: 100%;
}

.table-body {
  overflow-y: scroll;
  height: calc(100% - 40px); /* Adjust this value to match the height of the header */
}

解決策:

この問題を解決する鍵は、スクロールを処理することですテーブルのヘッダーと本文を同期させます。考えられる解決策は次のとおりです。

1. .table-header の位置を絶対位置に設定します。これにより、.inner-container 内に配置されたままになります。
2. スクロール イベント リスナーを .table-body に追加します。
3. イベント ハンドラーで、.table- の左オフセットを設定します。 header を .table-body の水平スクロール位置のマイナス位置に設定します。これにより、ヘッダーも本文とともに水平方向にスクロールします。

JavaScript/jQuery:

次のスクリプトを使用してスクロールを実装できます。同期:

$(".table-body").scroll(function() {
  $(".table-header").offset({ left: -this.scrollLeft });
});

説明:

このスクリプトは、ユーザーが .table-body を水平方向にスクロールすると、.table-header もそれに合わせてスクロールします。固定を維持するPosition.

注:

.table-header の高さに一致するように、CSS の .table-body の高さプロパティを調整します。これにより、本文がヘッダーにオーバーフローするのを防ぎます。

以上が水平スクロールバーと垂直スクロールバーの両方を備えた固定ヘッダー テーブルを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。