コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > HTML テーブルに水平スクロールを追加するにはどうすればよいですか?

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

DDD
リリース： 2024-11-23 05:17:10
オリジナル
1028 人が閲覧しました

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

    前の記事：PrimeFaces 使用時に jQuery の競合を回避するにはどうすればよいですか? 次の記事：CSS を使用してテキストを引き伸ばして Div の幅を満たすにはどうすればよいですか?
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
    から 2024-04-29 11:01:01
    0
    3
    2760
    Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
    から 2024-04-23 00:22:19
    0
    11
    2890
    子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
    から 2024-04-19 15:37:47
    0
    1
    2417
    親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
    から 2024-04-18 23:52:34
    0
    1
    2324
    CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
    から 2024-04-16 10:10:18
    0
    0
    2402
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート