Bar skrol dalam Jadual HTML

Skrol dalam Jadual HTML ialah salah satu ciri untuk menatal data daripada format mendatar dan menegak. Secara lalai, bar skrol menegak membolehkan selepas memasukkan bilangan data untuk memaksimumkan saiz dalam mod menegak. Tetapi dalam mod mendatar, selepas memasukkan data dalam format perenggan dan tidak dibalut, halaman mengandungi anak panah kanan sebagai pilihan untuk membolehkan data dalam bar skrol mendatar. Kami telah menyesuaikan pilihan skrol dengan bantuan penunjuk tetikus. Kami juga boleh memperuntukkan sempadan, ketinggian dan lebar jadual tatal.

Membuat Bar Tatal dalam Jadual HTML

Apabila kandungan kotak teks terlalu besar untuk dimuatkan, kotak Tatal HTML akan memastikan kotak itu menumbuhkan bar skrol. Sesetengah aplikasi, seperti aplikasi mudah alih, menggunakan kotak skrol, yang akan memaparkan ciri mereka, tetapi skrin mudah alih yang besar akan memaparkannya dengan baik beberapa kesesuaian skrin mudah alih kecil, ia tidak akan dipaparkan pada skrin, iaitu) ciri aplikasi, yang akan digunakan dalam kotak skrol. Sesetengah pemalam diperlukan untuk menunjukkan beberapa ciri dalam aplikasi web yang akan digunakan dalam skrin penyemak imbas. Katakan kita ingin menambah pilihan bar skrol dalam HTML, gunakan pilihan "limpahan", dan tetapkannya sebagai didayakan secara automatik untuk menambah bar skrol mendatar dan menegak. Jika kita ingin menambah pilihan bar menegak dalam Html, tambahkan baris "overflow-y" dalam fail.

• Sintaks Fail CSS untuk Bar Skrol

Limpahan:skrol:

{
Overflow-x:scroll;//add horizontal bar option in html
Overflow-y:scroll; //add vertical bar option in html
}

• Sintaks Fail HTML untuk Bar Skrol

Menggunakan tag, kami akan menambah pilihan tatal pada Halaman HTML.

<style>
div.scroll
{
Width-5px;
Height-10 px;
Overflow-x:scroll;
}
</style>

Contoh Bar Skrol dalam Jadual HTML

Diberikan adalah contoh untuk jadual HTML:

Contoh #1

Kod:

<title></title>
<style>
.divScroll {
overflow:scroll;
height:100px;
width:200px;
}
</style>


<div class="divScroll">
SivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaraman
</div>

Output:

Dalam contoh di atas, kami telah mendayakan tatal dalam bar mendatar dan menegak; skrol akan didayakan secara automatik jika teks melebihi had kotak teks.

Contoh #2

Kod:

<style>
.divScroll {
overflow:scroll;
height:25px;
width:200px;
}
</style>

<center>
<marquee class="divScroll" color:>Welcome to my domain</marquee>
</center>

Output:

Dalam contoh di atas, kami menggunakan ; kami akan menunjukkan teks dalam marquee menggunakan pilihan skrol. Kita boleh menggunakan animasi teks dalam bar skrol. Set seperti Tatal Pantas, Lantunan Pantas, Tatal Teks ke bawah, Tatal Teks Ke Atas, Teks Lompat, Kelajuan Biasa, dsb., turut digunakan.

Contoh #3

Dalam contoh di bawah, kami akan menggunakan fungsi amaran tentang jumlah data yang akan dipaparkan pada halaman web dalam format piksel.

Kod:

<center>
<div id="example" class="overflow-y:scroll;width:100px;height:200px;border:1px solid black" color:>
<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>

Output:

Contoh #4

Kita boleh menggunakan baris jadual

,tajuk jadual ,data jadual ,teg digunakan dalam HTML,menggunakan

tag kami akan mendayakan gaya itu sendiri iaitu)

Kod:

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




<p><strong>Output:</strong></p>
<p><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543961926881.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Bar skrol dalam Jadual HTML" ></p>
<h4 id="Contoh">Contoh #5</h4>
<p>Di sini kita akan melihat Pelbagai Jenis Kotak Tatal dalam HTML</p>
<ul>
<li>Kotak Tatal Berwarna</li>
<li>Bar Skrol Tersuai</li>
<li>Kotak tatal dengan imej</li>
<li>Kotak Tatal dengan Sempadan</li>
</ul>
<h5 id="Kotak-Tatal-Berwarna">1. Kotak Tatal Berwarna</h5>
<p>Dalam pilihan kotak skrol, kami telah menambah jenis warna yang berbeza dalam kawasan ruang kotak teks, seperti yang ditunjukkan dalam contoh di bawah:</p>
<p><strong>Kod:</strong></p>
<pre class="brush:php;toolbar:false">

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

Output:

Dalam contoh di atas, kami telah menentukan warna dalam teks, sama dalam panel skrol.

2. Bar Tatal Tersuai

Kami telah menyesuaikan bar skrol menggunakan sambungan Webkit; ia akan berfungsi dalam penyemak imbas.

Kod:

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


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

Output:

Dalam kod di atas, kami melihat pilihan tatal pada halaman penuh. Ia adalah pilihan tersuai kami; kami telah mendayakan pilihan tatal dalam skrin latar belakang penuh. Sekali, kami juga menyemak Keserasian penyemak imbas kerana kadangkala alat –Webkit dalam gaya CSS tidak menerima beberapa penyemak imbas. Contohnya, Microsoft mempunyai sambungan –ms- dan vendor penyemak imbas lain seperti sambungan –Webkit-.

3. Kotak Tatal Dengan Imej

Kami juga telah menggunakan kotak Tatal dalam imej latar belakang atau imej latar depan. Mari kita lihat beberapa contoh asas ciri ini.

Kod:

<div style="height:180px;width:180px;overflow:auto;">
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543964762888.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Sample picture for scroll box">
</div>

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.