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

スクロール可能な 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 サイトの他の関連記事を参照してください。