Untuk menampilkan tabel yang panjang diperangkat mobile dengan layar kecil tentu akan menyulitkan kita untuk melihatnya. Kita akan membuat tampilan tabel dengan banyak kolom menjadi baris secara responsive mengikuti ukuran layar smartphone seperti pada gambar di atas.
Berikut coding selengkapnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table</title>
<style>
table,th,td {border-collapse:collapse;font:12px verdana;border:1px #c0c0c0 solid;color:#808080;}
table tr:hover td {background:#BBDEFB;}
table th {background-color:#BBDEFB;color:#1a73eb;padding:8px;}
table tr:nth-child(odd) {background-color:#E3F2FD;}
@media only screen and (max-width:500px) {
table,thead,tbody,th,td,tr{display:block;}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {margin:0 0 1rem 0;}
td {
position: relative;
padding-left: 160px;
}
td:before {
position: absolute;
top: 0;
left: 6px;
width: 25%;
padding-right: 10px;
white-space: nowrap;
color:#1a73eb;
}
td:nth-of-type(1):before { content: "No."; }
td:nth-of-type(2):before { content: "Nama"; }
td:nth-of-type(3):before { content: "Versi"; }
td:nth-of-type(4):before { content: "Tanggal Rilis"; }
td:nth-of-type(5):before { content: "Versi Kernel Linux"; }
td:nth-of-type(6):before { content: "Level API"; }
td:nth-of-type(7):before { content: "Fitur"; }
}
</style>
</head>
<body>
<h1>Table Responsive</h1>
<table>
<thead>
<tr>
<th>No.</th>
<th>Nama</th>
<th>Versi Android</th>
<th>Tanggal Rilis</th>
<th>Versi Kernel Linux</th>
<th>Level API</th>
<th>Fitur</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Froyo</td>
<td>2.2</td>
<td>10 Mei 2010</td>
<td>?</td>
<td>8</td>
<td>USB tethering and Wi-Fi hotspot functionality</td>
</tr>
<tr>
<td>2</td>
<td>Gingerbread</td>
<td>2.3</td>
<td>6 Desember 2010</td>
<td>2.6.35</td>
<td>9-10</td>
<td>Support for Near Field Communication (NFC)</td>
</tr>
<tr>
<td>3</td>
<td>Honeycomb</td>
<td>3.0</td>
<td>22 Februari 2011</td>
<td>2.6.36</td>
<td>11-13</td>
<td>Increased ability of applications to access files on the SD card</td>
</tr>
<tr>
<td>4</td>
<td>Ice Cream Sandwich</td>
<td>4.0</td>
<td>19 Oktober 2011</td>
<td>3.0.1</td>
<td>14-15</td>
<td>Improvements to graphics, databases, spell-checking and Bluetooth functionality</td>
</tr>
<tr>
<td>5</td>
<td>Jelly Bean</td>
<td>4.1</td>
<td>9 Juli 2012</td>
<td>3.0.31-39</td>
<td>16-18</td>
<td>Bluetooth Audio/Video Remote Control Profile (AVRCP) 1.3 support</td>
</tr>
<tr>
<td>6</td>
<td>Kitkat</td>
<td>4.4</td>
<td>31 Oktober 2013</td>
<td>3.10</td>
<td>19-20</td>
<td>UI updates for Google Maps navigation and alarmsv</td>
</tr>
<tr>
<td>7</td>
<td>Lollipop</td>
<td>5.0</td>
<td>12 November 2014</td>
<td>3.16</td>
<td>21-22</td>
<td>Ability to join Wi-Fi networks and control paired Bluetooth devices from quick settings</td>
</tr>
<tr>
<td>8</td>
<td>Marshmallow</td>
<td>6.0</td>
<td>28 Mei 2015</td>
<td>3.18</td>
<td>23</td>
<td>Doze mode, which reduces CPU speed while the screen is off in order to save battery life</td>
</tr>
<tr>
<td>9</td>
<td>Nougat</td>
<td>7.0</td>
<td>22 Agustus 2016</td>
<td>4.4</td>
<td>24-25</td>
<td>Touch/display performance improvements</td>
</tr>
<tr>
<td>10</td>
<td>Oreo</td>
<td>8.0</td>
<td>21 Agustus 2017</td>
<td>4.10</td>
<td>26-27</td>
<td>Bluetooth battery level for connected devices, accessible in Quick Settings</td>
</tr>
</table>
</body>
</html>
Selamat mencoba. Semoga bermanfaat.
Coding Website 