HTML テーブルのスクロールバー-htmlチュートリアル-php.cn

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>

ログイン後にコピー

出力:

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>

ログイン後にコピー

出力:

HTML テーブルのスクロールバー