HTML テーブルのスクロールバーを表示するにはどうすればよいですか?-CSSチュートリアル-php.cn

How to Make an HTML Table Scrollbar Appear?

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

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

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

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

ログイン後にコピー

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

<table border=1>

ログイン後にコピー

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

タグ。

要素には、スクロールに対応するために必要な 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 ルールを変更して

要素の両方に適用する必要があります。そして要素: