Strategi kedua adalah dengan mengubah column table menjadi row. Jadi tidak ada lagi table.
Keunggulannya pada viewport kecil, semua isi table bisa dilihat. Namun perlu perhatian lebih dari visitor saat melihat isi table (karena semua kolom dari table telah diconvert menjadi row).
Perhatikan format table, pada td digunakan atribut data-th untuk header dari table yang diubah menjadi list. (Team, 1st, 2nd dst.) .
Header table (thead tr) disembunyikan dengan meyimpan pada posisi diluar viewport (top: -9999px; left: -9999px;)
Ingin mencoba live? Silakan click di no-more-table@codepen.io
<!DOCTYPE html>
<html>
<title>Responsive Web - No more Table</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<table>
<thead>
<tr>
<th>Team</th>
<th colspan="5">Pertandingan</th>
<th>Final</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Team">MANU</td>
<td data-th="1st">0</td>
<td data-th="2nd">0</td>
<td data-th="3rd">3</td>
<td data-th="4th">0</td>
<td data-th="5th">2</td>
<td data-th="Final">5</td>
</tr>
<tr>
<td data-th="Team">MANC</td>
<td data-th="1st">1</td>
<td data-th="2nd">0</td>
<td data-th="3rd">1</td>
<td data-th="4th">1</td>
<td data-th="5th">2</td>
<td data-th="Final">5</td>
</tr>
<tr>
<td data-th="Team">LIVP</td>
<td data-th="1st">1</td>
<td data-th="2nd">0</td>
<td data-th="3rd">2</td>
<td data-th="4th">0</td>
<td data-th="5th">2</td>
<td data-th="Final">5</td>
</tr>
</tbody>
</table>
</body>
</html>
th, td {
padding: 8px;
}
@media screen and (max-width: 500px ){
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top:-9999px;
left:-9999px;
}
td {
position: relative;
padding-left: 50%
}
td:before {
position: absolute;
left: 6px;
content: attr(data-th);}
}