Pendekatan responsive pada table ada beberapa strategi. Yang pertama adalah dengan menyembunyikan column table yang dianggap kurang penting.
Kelemahannya, pada viewport kecil, tidak ada cara untuk melihat isi column tersebut.
Tricknya cukup sederhana, definisikan class dari element td yang akan disembunyikan, lalu ubah display menjadi none pada viewport kecil.
Ingin coba live? Silakan click di hidden-column@codepen.io
<!DOCTYPE html>
<html>
<title>Responsive Web - Table Hidden Column</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<table>
<tr>
<th>Negara</th>
<th colspan="5" class="inning">Pertandingan</th>
<th>Final</th>
</tr>
<tr>
<td>
<span class="shortname">INA</span>
<span class="longname">Indonesia</span>
</td>
<td class="inning">0</td>
<td class="inning">0</td>
<td class="inning">3</td>
<td class="inning">0</td>
<td class="inning">2</td>
<td class="final">5</td>
</tr>
<tr>
<td>
<span class="shortname">THD</span>
<span class="longname">Thailand</span>
</td>
<td class="inning">1</td>
<td class="inning">0</td>
<td class="inning">2</td>
<td class="inning">0</td>
<td class="inning">1</td>
<td class="final">4</td>
</tr>
<tr>
<td>
<span class="shortname">MYA</span>
<span class="longname">Malaysia</span>
</td>
<td class="inning">1</td>
<td class="inning">1</td>
<td class="inning">0</td>
<td class="inning">1</td>
<td class="inning">0</td>
<td class="final">3</td>
</tr>
</table>
</body>
</html>
<style type="text/css">
th, td {
padding: 8px;
}
@media screen and (max-width: 500px ){
.inning{
display: none;
}
.longname{
display: none;
}
}
</style>