HTML テーブルに水平 (および垂直) スクロールバーを追加するにはどうすればよいですか?

HTML テーブルに水平スクロールバーを追加する方法

この質問では、水平スクロールバーと垂直スクロールバーの両方を HTML テーブルに追加するという課題について説明しますが、最初は表示に問題がありました。

これを実現するには、提供されている手順に従ってください。答え:

まず、display: block を設定してテーブルの CSS を変更します。これにより、水平スクロールが可能になります。次に、overflow-x: auto を追加して、自動水平スクロールを有効にします。これにより、テーブルのコンテンツが利用可能な幅を超えたときにテーブルが水平にスクロールするようになります。

このソリューションで提供されるコード スニペットには次のものが含まれます。

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

この CSS は、改行を防止しながら効果的に水平スクロールを可能にします。

さらに、この回答では、表のキャプションをスクロールするさらに複雑な例を示し、さまざまな CSS テクニックを紹介しています。望ましい動作を実現します。表のセルが表全体を埋めない問題に対処するには、次の CSS コードを追加することを提案しています。

table tbody {
    display: table;
    width: 100%;
}

これらの CSS 構成を実装すると、水平スクロールと垂直スクロールの両方をサポートする HTML テーブルを作成できます。さまざまなテーブル サイズとコンテンツに効果的に対応します。

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