HTML でテーブル本体 (tbody) の高さを設定し、オーバーフロー スクロールを有効にするにはどうすればよいですか?

オーバーフロー スクロールによるテーブル本体の高さの設定

HTML テーブルを操作するときによく発生する問題の 1 つは、テーブルの高さを設定できないことです。 body (tbody) を使用してオーバーフロー スクロールを有効にします。これにより、テーブル データが切り取られたり、期待どおりに表示されなくなる可能性があります。

この問題を解決するには、tbody とそれを含むテーブルの両方の CSS プロパティを調整する必要があります:

1. tbody スタイル:

• 表示設定: ブロック;デフォルトのテーブル グリッド レイアウトを削除し、tbody がブロック レベルの要素のように動作できるようにします。
• height を使用して tbody の高さを指定します。
• overflow:scroll; を設定してオーバーフローを有効にします。 .

2.テーブル スタイル:

• オーバーフローの設定: 非表示。コンテンツがテーブルの外に溢れるのを防ぐため。
• テーブル レイアウトを使用: 固定;列幅が均等に分散されるようにします。

3.コンテナー テーブル:

場合によっては、垂直スクロールを有効にするために、コンテナー div 内でテーブルをラップし、div の overflow-y をスクロールに設定する必要がある場合があります。

次のようにします。これらの手順を実行すると、オーバーフロー スクロールを維持しながら tbody の高さを効果的に設定でき、表のデータが切れたりせずに表示できるようになります。 hidden.

コード例:

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

  table {
    table-layout: fixed;
    overflow: hidden;
  }

  #table-container {
    overflow-y: scroll;
  }
</style>

<div>

注: このアプローチには、ヘッダーとヘッダーの位置がずれる可能性など、特定の制限や欠点がある可能性があります。体の細胞。テーブルの特定の要件に合わせて、必要に応じて CSS をテストして調整することが重要です。

以上がHTML でテーブル本体 (tbody) の高さを設定し、オーバーフロー スクロールを有効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。