固定ヘッダーを持つスクロール可能な HTML テーブルを作成するにはどうすればよいですか?

スクロール可能な HTML テーブルの作成

HTML では、次の手順に従って垂直にスクロール可能なテーブルを表示できます。

1. テーブルを div でラップします: Create div 要素を作成し、その CSS プロパティを相対位置と固定高に設定して、テーブルで使用できる垂直方向のスペースを制限します。
2. オーバーフローを自動に設定します。 div のオーバーフロー プロパティを次のように設定します。 "auto" は、テーブルのコンテンツが div の高さを超える場合に垂直スクロールを有効にします。
3. テーブルに位置を適用します。 headers: スクロール中に表のヘッダー (thead) を固定したままにしたい場合は、thead 要素のposition プロパティを「absolute」に設定し、top、left、または right の CSS プロパティを使用して配置します。
4. テーブルの列に固定幅を設定する: テーブル列のサイズが変更されないように、テーブルの列が固定幅になっていることを確認します。

これらの手順を組み込んだ例を次に示します。

<div>

この例では、「table-wrapper」div の高さは固定されており、オーバーフローは「auto」に設定されています。 」と垂直スクロールが可能になります。テーブル ヘッダー (thead) には絶対位置があり、上部に固定されていますが、テーブル本体 (tbody) にはスクロール可能なデータが含まれています。

次の手順に従うことで、設定されたサイズを維持する HTML テーブルを作成できます。ヘッダーを固定し、本文をスクロールしてさまざまな量のデータを表示できるようにしました。

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