Cara Membuat Header Tabel Fix dengan CSS3
Pernahkan kalian meliahat banyak data pada suatu tabel ? apa yang pertama-tama kalian rasakan ? pastinya lumayan melelahkan yah bagi menyekroll data hingga kebawah, padahal dengan CSS3 kita dapat set bagian data di tabel agar lebih mempermudah kita pada menyeleksi atau melihat data yakni dengan menambahkan scroll di bagian tabel tersebut, dibawah ini akan saya contohkan bagaimana Cara Membuat Header Tabel Fix dengan CSS3. Tujuan Membangun Header Tabel Fix ialah supaya kita lebih gampang pada memilih data di tebel, simak langkah-langkahnya berikut ini.
Bagi merancang sebuah tabel kita akan menggunakan tag HTML table seperti berikut.
<body>
<section>
<h1>Table Fixed</h1>
<div class=tbl-header>
<table cellpadding=0 cellspacing=0>
<thead>
<tr>
<th>NO</th>
<th>NAMA</th>
<th>Domisili</th>
<th>Status</th>
<th>Telp</th>
</tr>
</thead>
</table>
</div>
<div class=tbl-content>
<table cellpadding=0 cellspacing=0>
<tbody>
<tr>
<td>1</td>
<td>Suratno</td>
<td>Jakarta</td>
<td>Nikah</td>
<td>081231544</td>
</tr>
<tr>
<td>2</td>
<td>Suratni</td>
<td>Surabaya</td>
<td>Pelajar</td>
<td>082154325</td>
</tr>
<tr>
<td>3</td>
<td>Wibowo</td>
<td>Jogjakarta</td>
<td>Nikah</td>
<td>078546521</td>
</tr>
<tr>
<td>4</td>
<td>Rusadi</td>
<td>Lampung</td>
<td>Pelajar</td>
<td>024584544</td>
</tr>
<tr>
<td>5</td>
<td>Suratno</td>
<td>Jakarta</td>
<td>Nikah</td>
<td>081231544</td>
</tr>
<tr>
<td>6</td>
<td>Suratni</td>
<td>Surabaya</td>
<td>Pelajar</td>
<td>082154325</td>
</tr>
<tr>
<td>7</td>
<td>Wibowo</td>
<td>Jogjakarta</td>
<td>Nikah</td>
<td>078546521</td>
</tr>
<tr>
<td>8</td>
<td>Rusadi</td>
<td>Lampung</td>
<td>Pelajar</td>
<td>024584544</td>
</tr>
<tr>
<td>9</td>
<td>Suratno</td>
<td>Jakarta</td>
<td>Nikah</td>
<td>081231544</td>
</tr>
<tr>
<td>10</td>
<td>Suratni</td>
<td>Surabaya</td>
<td>Pelajar</td>
<td>082154325</td>
</tr>
<tr>
<td>11</td>
<td>Wibowo</td>
<td>Jogjakarta</td>
<td>Nikah</td>
<td>078546521</td>
</tr>
<tr>
<td>12</td>
<td>Rusadi</td>
<td>Lampung</td>
<td>Pelajar</td>
<td>024584544</td>
</tr>
<tr>
<td>13</td>
<td>Suratno</td>
<td>Jakarta</td>
<td>Nikah</td>
<td>081231544</td>
</tr>
<tr>
<td>14</td>
<td>Suratni</td>
<td>Surabaya</td>
<td>Pelajar</td>
<td>082154325</td>
</tr>
<tr>
<td>15</td>
<td>Wibowo</td>
<td>Jogjakarta</td>
<td>Nikah</td>
<td>078546521</td>
</tr>
<tr>
<td>16</td>
<td>Rusadi</td>
<td>Lampung</td>
<td>Pelajar</td>
<td>024584544</td>
</tr>
<tr>
<td>17</td>
<td>Suratno</td>
<td>Jakarta</td>
<td>Nikah</td>
<td>081231544</td>
</tr>
<tr>
<td>18</td>
<td>Suratni</td>
<td>Surabaya</td>
<td>Pelajar</td>
<td>082154325</td>
</tr>
<tr>
<td>19</td>
<td>Wibowo</td>
<td>Jogjakarta</td>
<td>Nikah</td>
<td>078546521</td>
</tr>
<tr>
<td>20</td>
<td>Rusadi</td>
<td>Lampung</td>
<td>Pelajar</td>
<td>024584544</td>
</tr>
<tr>
<td>21</td>
<td>Suratno</td>
<td>Jakarta</td>
<td>Nikah</td>
<td>081231544</td>
</tr>
<tr>
<td>22</td>
<td>Suratni</td>
<td>Surabaya</td>
<td>Pelajar</td>
<td>082154325</td>
</tr>
<tr>
<td>23</td>
<td>Wibowo</td>
<td>Jogjakarta</td>
<td>Nikah</td>
<td>078546521</td>
</tr>
<tr>
<td>24</td>
<td>Rusadi</td>
<td>Lampung</td>
<td>Pelajar</td>
<td>024584544</td>
</tr>
<tr>
<td>25</td>
<td>Suratno</td>
<td>Jakarta</td>
<td>Nikah</td>
<td>081231544</td>
</tr>
<tr>
<td>26</td>
<td>Suratni</td>
<td>Surabaya</td>
<td>Pelajar</td>
<td>082154325</td>
</tr>
<tr>
<td>27</td>
<td>Wibowo</td>
<td>Jogjakarta</td>
<td>Nikah</td>
<td>078546521</td>
</tr>
<tr>
<td></td>
<td>Rusadi</td>
<td>Lampung</td>
<td>Pelajar</td>
<td>024584544</td>
</tr>
<tr>
<td>28</td>
<td>Suratno</td>
<td>Jakarta</td>
<td>Nikah</td>
<td>081231544</td>
</tr>
<tr>
<td>29</td>
<td>Suratni</td>
<td>Surabaya</td>
<td>Pelajar</td>
<td>082154325</td>
</tr>
<tr>
<td>30</td>
<td>Wibowo</td>
<td>Jogjakarta</td>
<td>Nikah</td>
<td>078546521</td>
</tr>
<tr>
<td>31</td>
<td>Rusadi</td>
<td>Lampung</td>
<td>Pelajar</td>
<td>024584544</td>
</tr>
</tbody>
</table>
</div>
</section>
</body>
Silahkan bikin data di tabel sebanyak mungkin agar terlihat pas di scroll, setelah bikin tabel dan juga data nya, berikutnya ialah merancang scroll di tabel header tabel fix atau tetap stay, bserikut sintak CSS3.
h1{
font-size: 30px;
color: #fff;
text-transform: uppercase;
font-weight: 300;
text-align: center;
margin-bottom: 15px;
}
table{
width:100%;
table-layout: fixed;
}
.tbl-header{
background-color: rgba(255,255,255,0.3);
}
.tbl-content{
height:300px;
overflow-x:auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: #fff;
text-transform: uppercase;
}
td{
padding: 15px;
text-align: left;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: #fff;
border-bottom: solid 1px rgba(255,255,255,0.1);
}
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
background: -webkit-linear-gradient(left, #E10078, #5DC0CD);
background: linear-gradient(to right, #E10078, #5DC0CD);
font-family: 'Roboto', sans-serif;
}
section{
margin: 50px;
}
.made-with-love {
margin-top: 40px;
padding: 10px;
clear: left;
text-align: center;
font-size: 10px;
font-family: arial;
color: #fff;
}
.made-with-love i {
font-style: normal;
color: #F50057;
font-size: 14px;
position: relative;
top: 2px;
}
.made-with-love a {
color: #fff;
text-decoration: none;
}
.made-with-love a:hover {
text-decoration: underline;
}
/* for kustom scrollbar for webkit browser*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}Setelah segala sintak diketikan, simpan file dengan format .html kemudian buka di browser masing-masing dan lihat hasilnya, makan nanti di tabel akan terlihat scroll dan kita dapat gampang melihat data tanpa mesti menutup header tabel nya.
Baiklah sekianlah panduan mengenai bagaimana Cara Membuat Header Tabel Fix dengan CSS3. semoga bermanfaat. Selamat mencoba..
Sumber https://kursuswebsite.org
