私の体がスクロールしないのはなぜですか?

テーブル本体 (tbody) でのオーバーフロー スクロールの対処

オーバーフロー スクロールを有効にして tbody 要素の高さを設定しようとすると、次の CSS が発生する可能性があります。スニペット:

tbody {
  height: 50px;
  display: block;
  overflow: scroll;
}

このスタイルを実装しているにもかかわらず、tbody 要素は応答しないままです。スクロール。この問題を修正するには、次の CSS ルールを利用することを検討してください。

• display: block; tbody の場合: tbody 要素をブロック要素に変換して、スクロールできるようにします。
• display: table; tr の場合: 各 tr 要素の表示プロパティを table に設定することで、テーブルの動作を維持します。
• table-layout: 修正済み。 tr と thead の場合: table-layout を使用してセルが均等に分散されるようにします: 修正済み。 tr 要素と thead 要素の両方。

table, tr td {
  border: 1px solid red;
}

tbody {
  display: block;
  height: 50px;
  overflow: auto;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc(100% - 1em); /* Adjust for scrollbar width */
}

table {
  width: 400px;
}

コンテンツが不十分なために tbody 要素が依然としてスクロールバーを表示できない場合は、overflow プロパティを明示的に overflow-y:scroll; に設定します。

tbody {
  ...
  overflow-y: scroll;
}

注: テーブルのスクロールを実現するこのアプローチには、特定のシナリオでは制限がある可能性があることを認識することが重要です。特に、ヘッダー セルとボディ セルの間の位置がずれる可能性があります。位置合わせが重要な場合は、CSS グリッドなどのより堅牢なレイアウト手法の使用を検討してください。

以上が私の体がスクロールしないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。