Updated May 20, 2023
Introduction to Scrollbar in HTML Table
Scrollbar in HTML Table is one of the features to scroll the data from horizontal and vertical formats. In default, a vertical scroll bar enables after entering the number of data to maximize size in the vertical mode. But in horizontal mode, after entering the data in paragraph format and not wrapped, the page contains the right arrow as the option to enable the data in the horizontal scroll bar. We have customized the scroll options with the help of mouse pointers. We can also allocate the scroll tables’ border, height, and width.
Creating a Scrollbar in HTML Table
When the text box’s content is too large to fit in, an HTML Scroll box will ensure that the box grows scroll bars. Some applications, like mobile apps, use scroll boxes, which will display their features, but big mobile screens will display it good some small mobile screens compatibility, it will not display on the screen, i.e.)application feature, which is to be used in the scroll box. Some plugins are needed to show some features in web applications that are to be used in the browser screen. Suppose we want to add a scroll bar option in HTML, use an “overflow” option, and set it as auto-enabled for adding horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.
- CSS File Syntax for Scrollbars
Overflow:scroll:
{
Overflow-x:scroll;//add horizontal bar option in html
Overflow-y:scroll; //add vertical bar option in html
}- HTML File Syntax for Scrollbars
Using the <Style> tag, we will add the scroll options to HTML Page.
<style>
div.scroll
{
Width-5px;
Height-10 px;
Overflow-x:scroll;
}
</style>Examples of Scrollbar in HTML Table
Given are the examples for the HTML table:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.divScroll {
overflow:scroll;
height:100px;
width:200px;
}
</style>
</head>
<body>
<div class="divScroll">
SivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaraman
</div>
</body>
</html>Output:
In the above example, we have enabled scrolling in horizontal and vertical bars; scrolls will automatically enable if the text exceeds the text box limits.
Example #2
Code:
<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>Output:
In the above example, we used the <marquee>; we will show the text within the marquee using the scroll option. We can use animate the text in the scroll bars. Different sets of <marquees> like Faster Scrolling, Faster Bounce, Text scrolling down, Text Scrolling Up, Jumping Text, Normal Speed, etc., are also used.
Example #3
In the example below, we will use the alert function of how much data will be displayed on the web page in pixel format.
Code:
<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>Output:
Example #4
We can use the table row <tr>,table headers <td>,table data<td>,tags are used in the HTML,using <div> tag we will enable the styles itself i.e) <div style=”overflow-x:auto;”>
Code:
<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>Output:
Example #5
Here we are going to see the Various Types of Scroll Boxes in HTML
- Colored Scroll Boxes
- Customized Scrollbars
- Scroll box with images
- Scroll Box with Borders
1. Colored Scroll Boxes
In the scroll box option, we have added the different types of colors in the text box space areas, as shown in the example below:
Code:
<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>Output:
In the above example, we have specified the colors in the text, the same in the scroll panel.
2. Customized Scrollbars
We have customized the scroll bars using Webkit extensions; it will work in the browsers.
Code:
<!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>Output:
In the above codes, we see scroll options on the full page. It’s our customized option; we have enabled the scroll options in the full background screen. Once, we also checked the browser Compatability because sometimes the tool –Webkit in the CSS style does not accept some browsers. For example, Microsoft has the –ms- extensions and other browser vendors like –Webkit- extensions.
3. Scroll Box With Images
We have also used Scroll boxes in background images or foreground images. Let us see some basic examples of this feature.
Code:
<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>Output:
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.
Recommended Articles
This article is a guide to the Scrollbar in HTML Table. We discuss creating a Scrollbar in Html Table and some features and examples. You can also go through our other suggested articles to learn more–
