Pernahkan kalian meliahat banyak data dalam suatu tabel ? apa yang pertama kalian rasakan ? pastinya cukup melelahkan yah untuk menyekroll data sampai kebawah, padahal dengan CSS3 kita bisa set bagian data pada tabel agar lebih memudahkan kita dalam menyeleksi atau melihat data yakni dengan menambahkan scroll pada bagian tabel tersebut, dibawah ini akan saya contohkan bagaimana Cara Membuat Header Tabel Fix dengan CSS3. Tujuan Membuat Header Tabel Fix adalah supaya kita lebih mudah dalam memilih data pada tebel, simak langkah-langkahnya berikut ini.
Untuk membuat 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>Alamat</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 buat data pada tabel sebanyak mungkin agar terlihat pas di scroll, setelah buat tabel beserta data nya, selanjutnya adalah membuat scroll pada 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 custom 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 semua sintak diketikan, simpan file dengan format .html kemudian buka pada browser masing-masing dan lihat hasilnya, makan nanti pada tabel akan terlihat scroll dan kita bisa mudah melihat data tanpa harus menutup header tabel nya.
Baiklah sekian tutorial mengenai bagaimana Cara Membuat Header Tabel Fix dengan CSS3. semoga bermanfaat. Selamat mencoba..