HTML テーブルにスクロール バーを表示する方法
HTML でテーブルを作成する場合、一貫したテーブルを維持したい状況によく遭遇します。行数が表示領域を超えた場合でも、そのコンテンツにアクセスできる状態を維持しながら、サイズを変更できます。これを実現するには、テーブル自体内にスクロールバーを表示する必要があるシナリオが発生する場合があります。
この場合、次のような CSS スタイルを使用しようとした可能性があります。
tbody {
height: 80em;
overflow: scroll;
}ログイン後にコピー
およびこれらを HTML 構造に組み込みました:
<table border=1>
ログイン後にコピー
しかし、これらのスタイルを実装したにもかかわらず、スクロールバーが表示されないことに気づいたかもしれません。この問題は、
の親要素が タグ。 要素には、スクロールに対応するために必要な CSS プロパティがありません。
#table-wrapper {
position: relative;
}
#table-scroll {
height: 150px;
overflow: auto;
margin-top: 20px;
}
#table-wrapper table {
width: 100%;
}
#table-wrapper table * {
background: yellow;
color: black;
}
#table-wrapper table thead th .text {
position: absolute;
top: -20px;
z-index: 2;
height: 20px;
width: 35%;
border: 1px solid red;
}ログイン後にコピー
要素の両方に適用する必要があります。そして要素:さらに、 をラップする必要があります。 <div> 内の要素ID が「table-wrapper」の要素:これらの変更を実装すると、HTML テーブル内にスクロールバーを正常に表示でき、ユーザーがそのコンテンツをシームレスに移動できるようになります。以上がHTML テーブルのスクロールバーを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
静的フォームプロバイダーの比較
Apr 16, 2025 am 11:20 AM
ここでは、「静的フォームプロバイダー」という用語を埋めてみましょう。あなたはあなたのHTMLを持ってきます
SASSをより速くするための概念の証明
Apr 16, 2025 am 10:38 AM
新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。
HTMLダイアログ要素を使用したいくつかの実践
Apr 16, 2025 am 11:33 AM
これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです
ペーパーフォーム
Apr 16, 2025 am 11:24 AM
購入またはビルドは、テクノロジーの古典的な議論です。自分で物を構築することは、あなたのクレジットカードの請求書にはラインアイテムがないため、安価に感じるかもしれませんが
See all articles
