HTML 表格中的捲軸-html教學-PHP中文網

HTML Table 中的捲軸是水平和垂直格式滾動資料的功能之一。預設情況下，輸入資料數後會啟用垂直捲軸，以在垂直模式下最大化尺寸。但在水平模式下，以段落格式輸入資料且未換行後，頁麵包含右箭頭作為啟用水平捲軸中資料的選項。我們藉助滑鼠指標自訂了滾動選項。我們也可以分配滾動表的邊框、高度和寬度。

在 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 表格中的捲軸

在上面的範例中，我們使用了;我們將使用捲動選項在選取框內顯示文字。我們可以使用捲軸中的文字動畫。不同組的還使用了更快的滾動、更快的彈跳、文字向下滾動、文字向上滾動、文字跳躍、正常速度等。

範例 #3

在下面的範例中，我們將使用警報功能，以像素格式在網頁上顯示多少資料。

代碼：

<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>

登入後複製

輸出：

HTML 表格中的捲軸

範例#4

我們可以使用表格行

，表格標題，表格資料，標籤在HTML中使用，使用

；標籤我們將啟用樣式本身，即)

代碼：

<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>

登入後複製

輸出：

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>

登入後複製

輸出：

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>

登入後複製

輸出：

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>

登入後複製

輸出：

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:

HTML 表格中的捲軸

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中文網其他相關文章！