HTML 表格中的滚动条
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>输出：
在上面的例子中，我们启用了水平和垂直条的滚动；如果文本超出文本框限制，滚动将自动启用。
示例#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
在下面的示例中，我们将使用警报功能，以像素格式在网页上显示多少数据。
代码：
<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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
