水平スクロールによる HTML テーブルの拡張
広範なデータ テーブルを扱う場合、垂直方向と垂直方向の両方を提供することでユーザー エクスペリエンスを向上させることが必要になります。水平スクロール機能。この記事では、HTML テーブルに水平スクロールバーを追加して、テーブルのコンテンツ サイズに関係なくシームレスなナビゲーションを実現する方法について説明します。
水平スクロールバーの追加
水平スクロールを実現するには、次の手順に従います:
-
テーブルを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 サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
-
2025-02-08 08:05:41
-
2025-02-08 06:04:07
-
2025-02-08 06:03:08
-
2025-02-08 04:04:10
-
2025-02-08 04:02:14
-
2025-02-08 02:10:08
-
2025-02-08 02:09:09
-
2025-02-08 02:08:09
-
2025-02-08 02:07:09
-
2025-02-08 02:05:11