Rumah >hujung hadapan web >html tutorial >Bar skrol dalam Jadual HTML
Bar skrol dalam Jadual HTML
- PHPzasal
- 2024-09-04 16:46:20767semak imbas
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
<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:
<!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:
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:
<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:
Dalam contoh di atas, kami menggunakan
Contoh #3
Dalam contoh di bawah, kami akan menggunakan fungsi amaran tentang jumlah data yang akan dipaparkan pada halaman web dalam format piksel.
Kod:
<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:
Contoh #4
Kita boleh menggunakan baris jadual
Kod:
<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:
Contoh #5
Di sini kita akan melihat Pelbagai Jenis Kotak Tatal dalam HTML
- Kotak Tatal Berwarna
- Bar Skrol Tersuai
- Kotak tatal dengan imej
- Kotak Tatal dengan Sempadan
1. Kotak Tatal Berwarna
Dalam pilihan kotak skrol, kami telah menambah jenis warna yang berbeza dalam kawasan ruang kotak teks, seperti yang ditunjukkan dalam contoh di bawah:
Kod:
<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:
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:
<!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:
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:
<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.
Atas ialah kandungan terperinci Bar skrol dalam Jadual HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!