テーブルの TBody を高さを固定してスクロール可能にするにはどうすればよいですか?

オーバーフロー スクロールを使用した TBody の高さの設定

オーバーフロー スクロールを使用してテーブル本体 (tbody) の高さを設定しようとすると、問題が発生する可能性があります。望ましい結果を達成するためのステップバイステップのガイドは次のとおりです。

tbody にスクロールバーが表示されるようにするには、その表示プロパティを block として指定します。これにより、コンテンツが垂直方向に流れるようになります。

次に、tbody 内の各 tr 要素の表示プロパティを table に設定します。これにより、行のテーブルのような動作が維持されます。

セルを均等に分散するには、テーブル レイアウトを使用します。親テーブル要素のプロパティ。これにより、すべてのセルの幅が確実に同じになり、表が崩れるのを防ぐことができます。

最新のアプローチでは、ここで説明する手法よりもグリッド レイアウトが優先されることに注意することが重要です。グリッド レイアウトにより、制御が向上し、副作用が少なくなります。

解決策を示す CSS の例は次のとおりです。

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);
}

table {
  width: 400px;
}

コンテンツが不十分なために tbody にスクロールバーが表示されない場合は、明示的にoverflow-y プロパティをスクロールに設定します。

ただし、これには特定の欠点があることを認識することが重要です。アプローチ:

• これは、ヘッドとボディのセル グリッドを分離し、位置合わせに影響を与える可能性があります。
• 現在、これらの問題を回避する、グリッド レイアウトなどのより良い代替手段が利用可能です。

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