検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML テーブルに水平スクロールを追加するにはどうすればよいですか?

HTML テーブルに水平スクロールを追加するにはどうすればよいですか?

DDD
DDDオリジナル
2024-11-23 05:17:10936ブラウズ

How to Add Horizontal Scrolling to HTML Tables?

水平スクロールによる HTML テーブルの拡張

広範なデータ テーブルを扱う場合、垂直方向と垂直方向の両方を提供することでユーザー エクスペリエンスを向上させることが必要になります。水平スクロール機能。この記事では、HTML テーブルに水平スクロールバーを追加して、テーブルのコンテンツ サイズに関係なくシームレスなナビゲーションを実現する方法について説明します。

水平スクロールバーの追加

水平スクロールを実現するには、次の手順に従います:

  1. テーブルをblock: の表示プロパティを設定します。ブロックする要素。これにより、テーブルがコンテナの全幅を占有することができます。
  2. 水平スクロールを有効にする: overflow-x プロパティを使用し、auto に設定します。これは、表の内容が使用可能な幅を超えた場合に水平スクロールバーを表示するようにブラウザに指示します。
    3. table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

    追加の考慮事項

    • セルがテーブル全体を埋める場合は、次のコードをCSS:
    table tbody {
    display: table;
    width: 100%;
}
    • より高度なスクロール動作については、次のリソースを参照してください: [Scrolling Table Captions](https://www.lizkeogh.com/html-table-caption-フロートなしのスクロール/).

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

    css html Resource for auto Property this display overflow table https
    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：PrimeFaces 使用時に jQuery の競合を回避するにはどうすればよいですか?次の記事：PrimeFaces 使用時に jQuery の競合を回避するにはどうすればよいですか?

    関連記事

    続きを見る