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

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

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

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

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

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

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