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

HTML5 テーブルへのスクロールバーの統合: 総合ガイド

HTML5 では、大規模なデータセットを管理するためにテーブルの機能の強化が不可欠になっています。そのような拡張機能の 1 つは、ユーザーが広範なコンテンツを簡単に移動できるようにするスクロールバーの追加です。

ステップ 1: テーブル構造の定義

まず、HTML5 でテーブル構造を定義します。次のように:

テーブルは 2 つのセクションで構成されます: head (

) にはテーブルの見出しが含まれ、本文 (

) にはデータ行が含まれます。

ステップ 2: テーブルのスタイルを設定する

次に、 CSS スタイルを追加してテーブルの外観を強化し、カスタマイズ可能な機能を提供します。スクロールバー:

#my_table {
  /* General table styling */
  border-radius: 20px;
  background-color: transparent;
  color: black;
  width: 500px;
  text-align: center;
}

#my_table thead, #my_table tbody {
  /* Separate styling for the table sections */
  display: table;
  width: 100%;
}

#my_table tbody {
  /* Styling for the body, including scrollbar */
  overflow: auto;
  height: 150px;
}

#my_table tr {
  /* Styling for individual rows */
  width: 100%;
  display: table;
  text-align: left;
}

#my_table th, #my_table td {
  /* Styling for table cells */
  width: 33%;
}

この CSS により、表が事前定義された幅内に収まり、境界線が丸くなり、本文セクションにスクロールバーが表示されます。

ステップ 3: 追加考慮事項 (オプション)

制御を強化するために、テーブルの見出しにパディング右を追加することで、テーブルの見出しのスクロールを防ぐことができます。

#my_table thead {
  padding-right: 18px;
  width: calc(100% - 18px);
}

結論

これらの手順に従うことで、スクロールバーを HTML5 テーブルに簡単に統合して、最適な状態を確保できます。広範なデータセットをナビゲートするときのユーザー エクスペリエンス。

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