垂直スクロールバーと水平スクロールバーの両方を備えた HTML テーブルを作成するにはどうすればよいですか?

Susan Sarandon
リリース: 2024-11-20 13:28:16
オリジナル
561 人が閲覧しました

How Can I Create HTML Tables with Both Vertical and Horizontal Scrollbars?

HTML テーブルで垂直スクロールバーと水平スクロールバーを実現する

垂直スクロールと水平スクロールの両方が必要なテーブルの作成は困難な場合があります。 CSS を使用してこれを実現する方法は次のとおりです。


  1. ブロックとして表示: Set display: blockテーブルがコンテナのように扱うようにします。

  2. 水平スクロールを有効にする: overflow-x: auto を適用します。水平スクロールを有効にするには、

  3. 改行を防止します: 空白: nowrap を使用します。表のセル内で過度の改行を防ぐため。

次の CSS コードは、このアプローチの例です。

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
ログイン後にコピー

例:

<table>
ログイン後にコピー

追加の考慮事項:

  • セル幅を確実に分散するには、table tbody { display: table; を追加します。幅: 100%; } CSS に追加します。
  • 表のキャプションのスクロールなど、より高度な例については、外部リソースを参照してください。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート