Ketika membuat desain web responsive, salah satu bagian yang perlu diperhatikan ialah tabel. Tabel sering kita gunakan untuk menyusun dan menampilkan data. Berbeda dengan bagian atau elemen lain seperti div, tabel akan lebih sulit untuk dibuatkan tampilan responsive dikarenakan terdiri dari kolom dan baris.
Pada tutorial ini, kita akan belajar bagaimana cara membuat tabel responsive dengan CSS. Dengan membuat desain tabel responsive, secara otomatis tampilan tabel akan menyesuaikan sesuai dengan perangkat user. Lebih detail, silakan lihat demo hasil membuat tabel responsive dibawah.
Membuat Tabel Responsive 1
Pada model pertama ini, kita akan membuat tabel responsive dengan tetap mempertahankan struktur tabel. Nantinya tabel akan diletakkan didalam .table-container. Selanjutnya bila dibuka dari perangkat mobile, tabel dapat di scroll secara horizontal.
Berikut kode selengkapnya.
<div class="table-container">
<table class="table">
<h3 class="text-center">Tabel Responsive 1</h3>
<caption>Tabel responsive dengan container</caption>
<thead>
<tr>
<th>Nama</th>
<th>Telpon</th>
<th>Email</th>
<th>Alamat</th>
<th>Jabatan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Andi</td>
<td>0852612136x</td>
<td>[email protected]</td>
<td>Jakarta</td>
<td>Programmer</td>
</tr>
<tr>
<td>Haris</td>
<td>081269134x</td>
<td>[email protected]</td>
<td>Bandung</td>
<td>Programmer</td>
</tr>
<tr>
<td>Windi</td>
<td>08112134x</td>
<td>[email protected]</td>
<td>Surabaya</td>
<td>Desainer</td>
</tr>
<tr>
<td>Riska</td>
<td>081390234x</td>
<td>[email protected]</td>
<td>Medan</td>
<td>Keuangan</td>
</tr>
<tr>
<td>Nissa</td>
<td>085311234x</td>
<td>[email protected]</td>
<td>Pekanbaru</td>
<td>Customer Support</td>
</tr>
</tbody>
</table>
</div>
Kode CSS responsivenya :
table {
margin: auto;
font-family: "Arial";
font-size: 12px;
}
.table {
border-collapse: collapse;
font-size: 13px;
}
.table th,
.table td {
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
padding: 9px 21px;
}
.table th,
.table td:last-child {
border-right: 1px solid #cccccc;
}
.table td:first-child {
border-top: 1px solid #cccccc;
}
caption {
caption-side: top;
margin-bottom: 10px;
font-size: 16px;
}
/* Table Header */
.table thead th {
background-color: #2ECD71;
color: #FFFFFF;
}
/* Table Body */
.table tbody td {
color: #353535;
}
.table tbody tr:nth-child(odd) td {
background-color: #f5fff9;
}
.table tbody tr:hover th,
.table tbody tr:hover td {
background-color: #f0f0f0;
transition: all .2s;
}
/*Tabel Responsive 1*/
.table-container {
overflow: auto;
}
Perhatikan kode struktur HTML diatas. Elemen table ditelakkan di dalam div .table-container. Nantinya tabel akan tampil secara utuh, namun dapat di scroll secara horizontal.
Membuat Tabel Responsive 2
Pada model kedua ini, tabel akan dibuat responsive dengan menghilangkan header tabel <thead>. Nah untuk keterangan header akan kita gunakan bantuan atribut data-header yang ada disetiap kolom.
Model tabel responsive ini dapat Anda gunakan apabila kolom yang ditampilkan sedikit. Namun apabila kolom yang ditampilkan banyak, model ini tidak disarankan untuk digunakan.
Berikut struktur tabel HTML.
<table class="table responsive-2">
<h3 class="text-center">Tabel Responsive 2</h3>
<caption>Tabel responsive tanpa header</caption>
<thead>
<tr>
<th>Nama</th>
<th>Telpon</th>
<th>Email</th>
<th>Alamat</th>
<th>Jabatan</th>
</tr>
</thead>
<tbody>
<tr>
<td data-header="Nama">Andi</td>
<td data-header="Telpon">0852612136x</td>
<td data-header="Email">[email protected]</td>
<td data-header="Alamat">Jakarta</td>
<td data-header="Jabatan">Programmer</td>
</tr>
<tr>
<td data-header="Nama">Haris</td>
<td data-header="Telpon">081269134x</td>
<td data-header="Email">[email protected]</td>
<td data-header="Alamat">Bandung</td>
<td data-header="Jabatan">Programmer</td>
</tr>
<tr>
<td data-header="Nama">Windi</td>
<td data-header="Telpon">08112134x</td>
<td data-header="Email">[email protected]</td>
<td data-header="Alamat">Surabaya</td>
<td data-header="Jabatan">Desainer</td>
</tr>
<tr>
<td data-header="Nama">Riska</td>
<td data-header="Telpon">081390234x</td>
<td data-header="Email">[email protected]</td>
<td data-header="Alamat">Medan</td>
<td data-header="Jabatan">Keuangan</td>
</tr>
<tr>
<td data-header="Nama">Nissa</td>
<td data-header="Telpon">085311234x</td>
<td data-header="Email">[email protected]</td>
<td data-header="Alamat">Pekanbaru</td>
<td data-header="Jabatan">Customer Support</td>
</tr>
</tbody>
</table>
Adapun kode CSS responsivenya.
@media screen and (max-width: 520px) {
/*Tabel Responsive 2*/
.responsive-2 {
width: 100%;
}
.responsive-2 thead {
display: none;
}
.responsive-2 td {
display: block;
text-align: right;
border-right: 1px solid #e1edff;
}
.responsive-2 td::before {
float: left;
text-transform: uppercase;
font-weight: bold;
content: attr(data-header);
}
}
Membuat Tabel Responsive 3
Model ketiga ini tidak jauh berbeda dengan yang kedua diatas. Hanya saja bagian header tabel akan ditampilkan.
Berikut struktur HTML-nya.
<table class="table responsive-3">
<h3 class="text-center">Tabel Responsive 3</h3>
<caption>Tabel responsive dengan header</caption>
<thead>
<tr>
<th class="column-primary" data-header="User"><span>Nama</span></th>
<th>Telpon</th>
<th>Email</th>
<th>Alamat</th>
<th>Jabatan</th>
</tr>
</thead>
<tbody>
<tr>
<td data-header="Nama">Andi</td>
<td data-header="Telpon">0852612136x</td>
<td data-header="Email">[email protected]</td>
<td data-header="Alamat">Jakarta</td>
<td data-header="Jabatan">Programmer</td>
</tr>
<tr>
<td data-header="Nama">Haris</td>
<td data-header="Telpon">081269134x</td>
<td data-header="Email">[email protected]</td>
<td data-header="Alamat">Bandung</td>
<td data-header="Jabatan">Programmer</td>
</tr>
<tr>
<td data-header="Nama">Windi</td>
<td data-header="Telpon">08112134x</td>
<td data-header="Email">[email protected]</td>
<td data-header="Alamat">Surabaya</td>
<td data-header="Jabatan">Desainer</td>
</tr>
<tr>
<td data-header="Nama">Riska</td>
<td data-header="Telpon">081390234x</td>
<td data-header="Email">[email protected]</td>
<td data-header="Alamat">Medan</td>
<td data-header="Jabatan">Keuangan</td>
</tr>
<tr>
<td data-header="Nama">Nissa</td>
<td data-header="Telpon">085311234x</td>
<td data-header="Email">[email protected]</td>
<td data-header="Alamat">Pekanbaru</td>
<td data-header="Jabatan">Customer Support</td>
</tr>
</tbody>
</table>
Kode CSS responsivenya.
@media screen and (max-width: 520px) {
/*Tabel Responsive 3*/
.responsive-3 {
width: 100%;
}
.responsive-3 thead th.column-primary {
width: 100%;
}
.responsive-3 thead th:not(.column-primary) {
display:none;
}
.responsive-3 td {
display: block;
width: auto;
text-align: right;
border-right: 1px solid #e1edff;
}
.responsive-3 thead th::before {
text-transform: uppercase;
font-weight: bold;
content: attr(data-header);
}
.responsive-3 thead th:first-child span {
display: none;
}
.responsive-3 td::before {
float: left;
text-transform: uppercase;
font-weight: bold;
content: attr(data-header);
}
}
Kesimpulan
Demikian beberapa model membuat tabel responsive dengan CSS. Anda dapat memilih salah satu dari 3 model diatas sesuai dengan kebutuhan.
Selamat mencoba dan semoga bermanfaat.
