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 までご連絡ください。
Googleフォント変数フォント
Apr 09, 2025 am 10:42 AM
Google Fontsが新しいデザイン（ツイート）を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません
HTMLデータ属性ガイド
Apr 11, 2025 am 11:50 AM
HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。
SASSをより速くするための概念の証明
Apr 16, 2025 am 10:38 AM
新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。
See all articles
