HTML5 テーブルにスクロールバーを追加するにはどうすればよいですか?

HTML5 テーブルにスクロールバーを作成する

長いテーブルを表示する際のユーザー エクスペリエンスを向上させるために、スクロールバーを追加すると便利なナビゲーション方法が提供されます内容。ここでは、スクロールバーを HTML5 テーブルに組み込む方法に関するステップバイステップのガイドを示します。

HTML 構造:

テーブル要素内にテーブル データをカプセル化します。簡単に参照してスタイル設定できる ID。必要に応じて、テーブル行 () とデータ セル () を定義することもできます。

CSS スタイル:

1. table.tableSection {

   a.表データを表形式で配置するには、表示プロパティを「table」に設定します。
   b.幅をパーセントまたは固定値として指定して、テーブル全体の幅を制御します。

2. table.tableSection thead, table.tableSection tbody {

   ａ． float プロパティを「left」に設定して、ヘッダー (thead) セクションと本文 (tbody) セクションを並べて表示できるようにします。
   b.幅をテーブル幅のパーセンテージとして設定して、幅全体を占めるようにします。コンテンツが利用可能な高さを超えた場合に垂直スクロールを有効にするには、オーバーフロー プロパティを「自動」に設定します。

   b.高さを定義して、テーブル本体の表示領域を指定します。

3. table.tableSection tr {

   
   a.各行の幅を制御するには、テーブル幅のパーセンテージとして幅を設定します。

   b.各行内のセルを配置するには、表示プロパティを「table」に設定します。

4. table.tableSection th, table.tableSection td {

   
   ａ．幅を表の幅のパーセンテージとして設定して、各セルの幅を決定します。

5. 追加の考慮事項:

   テーブルにヘッダー行が含まれている場合、CSS またはJavaScript。

ヘッダー行がスクロールして表示されなくなるのを防ぐには、calc や Position:sticky などの CSS3 プロパティを使用して可視性を維持することを検討してください。

あるいは、スクロールバーの存在を検出することもできます。 JavaScript を使用し、それに応じてスタイルを適用します。

以上がHTML5 テーブルにスクロールバーを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。