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

に水平スクロールバーと垂直スクロールバーを備えた固定ヘッダー テーブル あなたが直面している問題は、固定ヘッダー テーブルに垂直スクロールバーを追加すると発生します。ヘッダーテーブル。垂直スクロールバーは、水平スクロールバーの位置決めを妨げます。両方が外側のコンテナ内のスペースで競合するためです。

HTML と CSS の構造

指定された HTML と CSS構造は良い出発点です。 HTML はネストされたテーブル構造で構成されており、ヘッダー テーブルは固定位置に設定され、本文テーブルは overflow-y:scroll に設定されています。 CSS は、ヘッダー セルと本文セルの固定の高さと幅を含む、表要素のスタイルを定義します。

解決策

問題を解決するには、水平方向と水平方向の両方を使用します。垂直スクロールバーが正しく動作している場合は、CSS とJavaScript:

1. CSS:

   • overflow-x を削除します。 .inner-container.
   • のプロパティを .inner-container に特定の幅でクラスを追加します (例: 「scroll-container」)。

2. JavaScript:

   • JavaScript を使用して計算します.scroll-container の幅を指定し、.table-body の幅をその幅に設定します。これにより、本体テーブルの幅がヘッダー テーブルと一致するようになり、水平スクロールバーの問題が防止されます。

サンプル コード

更新された例は次のとおりですコード:

/* CSS */
.scroll-container {
  width: 100%;
}

/* JavaScript */
var scrollContainer = document.querySelector(".scroll-container");
var tableBody = document.querySelector(".table-body");
tableBody.style.width = scrollContainer.offsetWidth + "px";

説明

.inner-container から overflow-x プロパティを削除し、JavaScript 経由で特定の幅を設定することで、次のことが保証されます。 .table-body には、水平スクロールと垂直スクロールの両方に対応できる適切な幅があります。この配置により、垂直スクロールバーが水平スクロールバーと干渉するのを防ぎ、両方が適切に機能できるようになります。

代替ソリューション

さらに、次のような他の解決策も検討できます。

• レイアウトに CSS グリッドまたはフレックスボックスを使用して、より柔軟で応答性の高いレイアウトを実現しますデザイン。
• ブートストラップやマテリアライズなどの CSS ライブラリを使用して調べます。これらのライブラリは、この機能の実装を簡素化する事前構築済みのコンポーネントとスタイルを提供します。

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