HTML テーブルのスクロールバー
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1657
14
1415
52
1309
25
1257
29
1229
24
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
PHPでHTML/XMLを解析および処理するにはどうすればよいですか？
Feb 07, 2025 am 11:57 AM
このチュートリアルでは、PHPを使用してXMLドキュメントを効率的に処理する方法を示しています。 XML（拡張可能なマークアップ言語）は、人間の読みやすさとマシン解析の両方に合わせて設計された多用途のテキストベースのマークアップ言語です。一般的にデータストレージに使用されます
