ホームページ > ウェブフロントエンド > CSSチュートリアル > HTML でテーブル本体 (tbody) の高さを設定し、オーバーフロー スクロールを有効にするにはどうすればよいですか?

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

Mary-Kate Olsen
リリース: 2024-12-16 09:16:11
オリジナル
518 人が閲覧しました

How Can I Set a Height for a Table Body (tbody) and Enable Overflow Scrolling in HTML?

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

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート