ホームページ > 記事 > ウェブフロントエンド > HTML テーブルのスクロールバー
HTML テーブルのスクロールバー
- PHPzオリジナル
- 2024-09-04 16:46:20732ブラウズ
HTML テーブルのスクロールバーは、データを水平および垂直フォーマットからスクロールする機能の 1 つです。デフォルトでは、データ数を入力すると垂直スクロール バーが有効になり、垂直モードでサイズを最大化します。ただし、水平モードでは、折り返されずに段落形式でデータを入力した後、ページには水平スクロール バーでデータを有効にするオプションとして右矢印が表示されます。マウス ポインタを使用してスクロール オプションをカスタマイズしました。スクロール テーブルの境界線、高さ、幅を割り当てることもできます。
HTML テーブルにスクロールバーを作成する
テキスト ボックスのコンテンツが大きすぎて収まらない場合、HTML スクロール ボックスを使用すると、ボックスのスクロール バーが確実に拡大されます。モバイル アプリなどの一部のアプリケーションでは、スクロール ボックスを使用してその機能が表示されますが、大きなモバイル画面では表示されますが、一部の小さなモバイル画面では互換性があり、画面上には表示されません (例) で使用されるアプリケーション機能スクロールボックス。ブラウザ画面で使用される Web アプリケーションの一部の機能を表示するには、いくつかのプラグインが必要です。 HTML にスクロール バー オプションを追加し、「オーバーフロー」オプションを使用して、水平および垂直スクロール バーの追加が自動有効になるように設定するとします。 Html に垂直バーのオプションを追加したい場合は、ファイルに「overflow-y」という行を追加します。
- スクロールバーの CSS ファイル構文
オーバーフロー:スクロール:
{
Overflow-x:scroll;//add horizontal bar option in html
Overflow-y:scroll; //add vertical bar option in html
}
- スクロールバーの HTML ファイル構文
の使用タグを使用して、HTML ページにスクロール オプションを追加します。
<style>
div.scroll
{
Width-5px;
Height-10 px;
Overflow-x:scroll;
}
</style>
HTML テーブルのスクロールバーの例
HTML テーブルの例を次に示します。
例 #1
コード:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.divScroll {
overflow:scroll;
height:100px;
width:200px;
}
</style>
</head>
<body>
<div class="divScroll">
SivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaraman
</div>
</body>
</html>
出力:
上の例では、水平バーと垂直バーのスクロールを有効にしました。テキストがテキスト ボックスの制限を超える場合、スクロールは自動的に有効になります。
例 #2
コード:
<html>
<style>
.divScroll {
overflow:scroll;
height:25px;
width:200px;
}
</style>
<body>
<center>
<marquee class="divScroll" color:"white">Welcome to my domain</marquee>
</center>
</body>
</html>
出力:
上記の例では、
例 #3
以下の例では、Web ページ上にピクセル形式で表示されるデータ量のアラート機能を使用します。
コード:
<html> <body> <center> <div id="example" class="overflow-y:scroll;width:100px;height:200px;border:1px solid black" color:"white"> <marquee>Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain </marquee> </div> <button onclick="alert( getComputedStyle(example).width )">alert( getComputedStyle(example).width )</button> </center> </body> </html>
出力:
例 #4
テーブル行
コード:
<html> <body> <center> <div style="overflow-x:auto;"> <table> <tr> <th>Welcome to my domain</th> <th>Name</th> <th>Email</th> </tr> <tr> <td>Sivaraman</td> <td>Sivaraman</td> <td>[email protected]</td> </div> </center> </body> </html>
出力:
例 #5
ここでは、HTML のさまざまなタイプのスクロール ボックスを見ていきます
- 色付きスクロールボックス
- カスタマイズされたスクロールバー
- 画像のあるスクロールボックス
- 枠線付きスクロールボックス
1.色付きのスクロール ボックス
以下の例に示すように、スクロール ボックス オプションで、テキスト ボックスのスペース領域にさまざまなタイプの色を追加しました。
コード:
<html> <body> <div style="height:125px;width:100px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;">Welcome to my domain.Welcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domainWelcome to my domain</div> </body> </html>
出力:
上記の例では、スクロール パネルでも同じようにテキストの色を指定しました。
2.カスタマイズされたスクロールバー
Webkit 拡張機能を使用してスクロール バーをカスタマイズしました。ブラウザで動作します。
コード:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin-bottom: 200%;
}
.scroll {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #88ba1c;
}
</style>
</head>
<body>
<div class="scroll">
Welcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domainWelcome to My domain
</div>
</body>
</html>
出力:
上記のコードでは、ページ全体にスクロール オプションが表示されます。これは私たちのカスタマイズされたオプションです。フルバックグラウンド画面でスクロールオプションを有効にしました。 CSS スタイルのツール Webkit が一部のブラウザを受け入れない場合があるため、ブラウザの互換性も確認しました。たとえば、Microsoft には –ms- 拡張機能があり、他のブラウザ ベンダーには –Webkit- 拡張機能などがあります。
3.画像のあるスクロールボックス
背景画像または前景画像でもスクロール ボックスを使用しました。この機能の基本的な例をいくつか見てみましょう。
コード:
<html> <div style="height:180px;width:180px;overflow:auto;"> <img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" alt="Sample picture for scroll box"> </div> </html>
出力:
4. Scroll Box Borders
We have also added the borders in the scroll panel areas. It will appear like highlighted portion Example below:
Code:
<div style="height:100px;width:140px;overflow:auto;border:8px solid yellow;padding:3%">Welcome to My DomainWelcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.</div>
Output:
The above picture highlights the scroll area. Similarly, we can also add different borders like dotted, dashed, double borders, etc.
Features of Scrollbar in HTML Table
When we use the Scroll box, it may have some features like.,
- Simple and lightweight
- Autoplay
- Multiple instances on one page
- Useful options for customizing your text in a scrolling
- We can also use the jquery library in scroll boxes for features like Previous/Next navigation buttons
Conclusion
In General, We have used many features in the HTML language, but the Scroll bar is one of the best features for crisping the data on the web page for displaying the contents. The above examples and points are in basics; meanwhile, we will have many advanced concepts and features in the HTML and CSS with Scroll bar options. The Latest Versions, HTML 5, and CSS 3, may add some options in the text scroll areas.
以上がHTML テーブルのスクロールバーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。