Tabel Responsif
Untuk menampilkan isi konten, table responsif akan otomatis menampilkan scroll secara horizontal jika layar terlalu kecil:
Tambahkan elemen penampung (seperti <div>) dengan overflow-x:auto
di sekitar elemen <table> untuk mengubah menjadi responsive:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>
<h2>Tabel Responsif</h2>
<p>Tabel responsif akan menampilkan scroll horizontal jika layarnya menjadi
kecil, ini bertujuan untuk menampilkan konten secara lengkap. Ubah ukuran jendela browser untuk melihat efeknya pada contoh ini.</p>
<p>Untuk membuat tabel responsif, tambahkan elemen penampung (seperti div) dengan <strong>overflow-x:auto</strong> di sekeliling elemen tabel:</p>
<div style="overflow-x: auto;">
<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Poin</th>
<th>Poin</th>
<th>Poin</th>
<th>Poin</th>
<th>Poin</th>
<th>Poin</th>
<th>Poin</th>
<th>Poin</th>
<th>Poin</th>
<th>Poin</th>
</tr>
<tr>
<td>Jil</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Hawa</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
</body></html>
Tutorial sebelumnya : Menambahkan Style Pada Table Dengan CSS
Tutorial setelahnya : Referensi Semua Properti CSS Table
Semua Tutorial CSS : Tutorial CSS