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

HTML5 テーブルへのスクロールバーの組み込み

HTML5 テーブルで垂直スクロールバーを有効にするには、以下の手順を実行します。

1.スクロール制御コードを埋め込む

テーブルの CSS 内に、次のコードを挿入して垂直スクロールを有効にします:

table#my_table {
  border-radius: 20px;
  background-color: transparent;
  color: black;
  width: 500px;
  text-align: center;
  overflow-y: scroll;
}

2.スクロールバーを本文コンテンツに制限する

表にヘッダーがある場合は、スクロールしないように次の CSS を使用します:

table#my_table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

3.下の境界線をきつくします

ユーザー エクスペリエンスを向上させるには、テーブルの下の境界線を調整します:

table#my_table td, table#my_table th {
  border-bottom: 1px solid black;
}

4.テーブルの高さと幅を調整する

必要に応じてテーブルの高さと幅をカスタマイズします:

table#my_table {
  height: 500px;
  width: 750px;
}

5.スクロールバーの厚さを最適化する (オプション)

スクロールバーを薄くするには、「-webkit-scrollbar-width」プロパティの使用を検討してください:

table#my_table::-webkit-scrollbar {
  width: 10px;
}

結論:

これらの手順に従うと、HTML5 テーブルにスクロールバーが追加され、ユーザーは次のことを行うことができます。コンテンツをシームレスにナビゲートします。

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