固定ヘッダーとスクロール可能な本体を備えた Bootstrap 3 テーブルを作成するにはどうすればよいですか?

スクロール可能なコンテンツを備えたテーブル固定ヘッダーの実装

この記事では、固定ヘッダーとスクロール可能なテーブルを作成するという課題に取り組みます。 Bootstrap 3 を使用したボディ。検討されたソリューションは、妥協することなく Bootstrap の美しさを維持することを目的としています。

課題

提供された例で示されているように、従来のブートストラップ テーブルには、テーブル本体の高さの設定に問題があります。高さを 10px に設定しても、結果は変わりません。この問題には別のアプローチが必要です。

スティッキー配置による固定ヘッダー

シンプルかつ効果的な解決策には、CSS スティッキー配置を利用することが含まれます。このアプローチには、位置の割り当てが含まれます。トップ: 0;テーブルのヘッダー (番目) 要素に追加し、それらがテーブルの先頭に固定されたままになるようにします。実装の内訳は次のとおりです。

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

上記のコードでは、overflow: auto; を含むクラス tableFixHead のコンテナを作成します。テーブルをスクロール可能にし、高さを 100px にして表示部分を定義します。テーブルのヘッダー要素には、位置が割り当てられます。トップ: 0;

このアプローチは、Chrome、Firefox、Edge などの最新のブラウザで効果的に機能します。

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