ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML テーブルを水平方向にスクロール可能にするにはどうすればよいですか?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-12-14 03:10:10335ブラウズ

How Can I Make an HTML Table Horizontally Scrollable?

スクロール可能な HTML テーブルの実現: 水平スクロールバーのガイド

HTML テーブルに垂直スクロールバーと水平スクロールバーの両方を追加することは、最初はわかりにくいように思えるかもしれません。ただし、基本的な CSS スタイルを理解すれば、簡単なプロセスになります。

表を水平方向にスクロール可能にする

水平スクロールを有効にするには、次の手順が重要です。

  1. 「表示: ブロック;」を設定します。テーブル上: これにより、テーブルがブロック レベルの要素として動作し、必要に応じて複数行に分割できるようになります。
  2. 'overflow-x: auto;' を適用します。テーブルへ: これにより、テーブルのコンテンツが水平幅を超えたときに水平スクロールバーが自動的に表示されます。

次に例を示します:

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

追加考慮事項

  1. セルの高さの不一致: 場合によっては、表のセルが表全体に収まらない場合があり、次の追加 CSS が必要になります:

    table tbody {
     display: table;
     width: 100%;
    }
  2. スクロールテーブルキャプション: より複雑な場合テーブル キャプションのスクロールを伴うシナリオについては、参照先の Web ページで提供されている包括的な例を検討してください。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。