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中文网其他相关文章！