HTML テーブルのスクロールバーを表示するにはどうすればよいですか?

HTML テーブルにスクロール バーを表示する方法

HTML でテーブルを作成する場合、一貫したテーブルを維持したい状況によく遭遇します。行数が表示領域を超えた場合でも、そのコンテンツにアクセスできる状態を維持しながら、サイズを変更できます。これを実現するには、テーブル自体内にスクロールバーを表示する必要があるシナリオが発生する場合があります。

この場合、次のような CSS スタイルを使用しようとした可能性があります。

tbody {
  height: 80em;
  overflow: scroll;
}

およびこれらを HTML 構造に組み込みました:

しかし、これらのスタイルを実装したにもかかわらず、スクロールバーが表示されないことに気づいたかもしれません。この問題は、

の親要素が タグ。

要素には、スクロールに対応するために必要な CSS プロパティがありません。

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: 150px;
  overflow: auto;
  margin-top: 20px;
}

#table-wrapper table {
  width: 100%;
}

#table-wrapper table * {
  background: yellow;
  color: black;
}

#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

これを解決するには、CSS ルールを変更して 要素の両方に適用する必要があります。そして要素:

<div>さらに、<table> をラップする必要があります。 <div> 内の要素ID が「table-wrapper」の要素:<p></p>これらの変更を実装すると、HTML テーブル内にスクロールバーを正常に表示でき、ユーザーがそのコンテンツをシームレスに移動できるようになります。</div>
</table>
</div>

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