Cara Melipat Tabel yang Memanjang Vertikal

Suatu ketika kita mendapati harus membuat tabel yang sangat panjang secara vertikal, baris-nya (row) banyak, bisa ratusan bahkan ribuan . Kandang dikehendaki agar tabel yang memanjang tersebut untuk dibuat lebih ringkas dengan melipatnya pada bagian tertentu. Maksud tabel yang memanjang itu seperti pada contoh laman ini. Tujuannya adalah agar pembaca dimudahkan dalam menyimak isi tabel.

Berikut ini contoh dan kodenya.
CONTOH

▾ Nama Binatang Berkaki 2
1	Ayam	5 ekor
2	Itik	3 ekor
▾ Nama Binatang Berkaki 4
1	Kuda	2 ekor
2	Sapi	5 ekor
3	Onta	6 ekor
4	Harimau	1 ekor
5	Gajah	9 ekor
6	Jerapa	7 ekor
7	Tikus	2 ekor
▾ Nama Burung
1	Perkutu	2 ekor
2	Merpati	10 ekor
3	Beo	1 ekor
▾ Nama Warna
1	Hitam	#000
2	Putih	#fff
3	Hijau	#008000
4	Biru	#00F

---

KODE

<table>
<tbody>
<tr class="jenis"> <td colspan="3">▾ Nama Binatang Berkaki 2</td> </tr>
<tr> <td>1</td> <td>Ayam</td> <td>5 ekor</td> </tr>
<tr> <td>2</td> <td>Itik</td> <td>3 ekor</td> </tr>
<tr class="jenis"> <td colspan="3">▾ Nama Binatang Berkaki 4</td> </tr>
<tr> <td>1</td> <td>Kuda   </td> <td>2 ekor</td> </tr>
<tr> <td>2</td> <td>Sapi   </td> <td>5 ekor</td> </tr>
<tr> <td>3</td> <td>Onta   </td> <td>6 ekor</td> </tr>
<tr> <td>4</td> <td>Harimau</td> <td>1 ekor</td> </tr>
<tr> <td>5</td> <td>Gajah  </td> <td>9 ekor</td> </tr>
<tr> <td>6</td> <td>Jerapa </td> <td>7 ekor</td> </tr>
<tr> <td>7</td> <td>Tikus  </td> <td>2 ekor</td> </tr>
<tr class="jenis"> <td colspan="3">▾ Nama Burung</td> </tr>
<tr> <td>1</td> <td>Perkutu</td> <td>2 ekor </td> </tr>
<tr> <td>2</td> <td>Merpati</td> <td>10 ekor</td> </tr>
<tr> <td>3</td> <td>Beo    </td> <td>1 ekor </td> </tr>
<tr class="jenis"> <td colspan="3">▾ Nama Warna</td> </tr>
<tr> <td>1</td> <td>Hitam </td> <td>#000   </td> </tr>
<tr> <td>2</td> <td>Putih </td> <td>#fff   </td> </tr>
<tr> <td>3</td> <td>Hijau </td> <td>#008000</td> </tr>
<tr> <td>4</td> <td>Biru  </td> <td>#00F   </td> </tr>
</tbody>
</table>

 <script>
$('tr.jenis').click(function(){
    $(this).nextUntil('tr.jenis').css('display', function(i,v){
        return this.style.display === 'table-row' ? 'none' : 'table-row';
    });
});
</script>  <style>
table {border: 3px solid red;}
tr {display: none;}
tr.jenis {display: table-row; text-align:left; background:orange; color:white; }
td {padding:3px 6px; border: 1px solid grey; }
</style>

Penjelasan dan maksudnya:

<tr> = tag pembuka baris tabel (row)
</tr> = tag penutup baris tabel (row)

<td> = tag pembuka kolom tabel (column)
</td> = tag penutup kolom tabel (column)

<td colspan="3"> jumlah 3 kolom yang di merger

Untuk baris dengan <tr class="jenis" >  ini akan ditampilkan, sementara <tr> tanpa class itu akan disembunyikan (dilipat).

Baris  yang disembunyikan hingga <tr class="jenis"> berikutnya hanya akan ditampilkan bila baris yang memiliki class="jenis" ini diklik.

Untuk melipat (menyembukan) kembali mesti diklik kembali baris dengan class="jenis".

Kadang di mode preview blogger ini tidak berjalan, namun bila artikel diterbitkan maka tabel yang diformat seperti tadi akan berjalan normal ini tergantung template blogger yang digunakan.

Demikian.