ラッパー Div を使用して HTML テーブルにスクロール バーを表示する
HTML テーブルを作成するとき、スクロール バーを表示する必要がある場合があります。テーブルのサイズがそのコンテナを超えている場合でも、テーブルのコンテンツを表示できるようにします。
実現するにはこれは、静的に配置されていない
<div> 内でテーブルをラップします。要素を作成し、それに overflow:auto CSS プロパティを割り当てます。これにより、表のコンテンツ用のスクロール可能な領域が作成されます。スクロール中に表のヘッダー ( セクションにあります) を表示し続けるには、ヘッダーを絶対位置に設定し、スクロール領域の上に配置します。これにより、スクロール可能なコンテンツによってヘッダーが非表示になることがなくなります。
スクロール バーと固定ヘッダーの両方を組み込んだ例を次に示します。 CSS: HTML: この手法を適用すると、次のように、ヘッダーを表示したままスクロールできる HTML テーブルを作成できます。ユーザーが提供した例に示されています。 以上がスクロール時に HTML テーブルのヘッダーを表示したままにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。#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>
ログイン後にコピー
ソース：php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません
Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2174
Google Chromeのモバイル版を表示する方法
こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2326
親ウィンドウには出力がありません
document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1840
関連トピック
詳細>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
