PHP Aku: bootstrap

Membuat Tabel dengan Accordian Bootstrap

Bagaimana cara membuat accordion di tabel? Berikut ini adalah contohnya:

<table class="table table-bordered table-hover dTable">
<thead>
<tr>
<th class="txt-c" width="20%">NO.AKUN</th>
<th class="txt-c" width="35%">NAMA AKUN</th>
<th class="txt-c" width="30%">KETERANGAN</th>
<th class="txt-c" width="15%">AKSI</th>
</tr>
</thead>
<tbody>
<tr>
<td class="txt-c">1.0.0.00.00</td>
<td class="txt-l">Aset</td>
<td class="txt-l">Keterangan 1</td>
<td class="txt-c">
<?php
echo '<a href="' . site_url('akun/edit') . '"><button type="button" class="btn btn-primary" title="Edit Akun"><i class="fa fa-edit"></i></button></a>
<a href="#"><button type="button" class="btn btn-danger" title="Hapus Akun"><i class="fa fa-remove"></i></button></a>';
?>
</td>
</tr>
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle pointer">
<td class="txt-c">1.1.0.00.00</td>
<td class="txt-l">Aset Lancar</td>
<td class="txt-l">Keterangan 2</td>
<td class="txt-c">
<?php
echo '<a href="' . site_url('akun/edit') . '"><button type="button" class="btn btn-primary" title="Edit Akun"><i class="fa fa-edit"></i></button></a>
<a href="#"><button type="button" class="btn btn-danger" title="Hapus Akun"><i class="fa fa-remove"></i></button></a>';
?>
</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="demo1">
<table class="table table-bordered table-striped" style="width: 100%">
<tr>
<td class="txt-c" width="20%" style="border-left: none !important;">1.1.1.00.00</td>
<td class="txt-l" width="35%">Kas</td>
<td class="txt-l" width="30%">Keterangan 2.1</td>
<td class="txt-c" width="15%" style="border-right: none !important;">
<?php
echo '<a href="' . site_url('akun/edit') . '"><button type="button" class="btn btn-primary" title="Edit Akun"><i class="fa fa-edit"></i></button></a>
<a href="#"><button type="button" class="btn btn-danger" title="Hapus Akun"><i class="fa fa-remove"></i></button></a>';
?>
</td>
</tr>
<tr>
<td class="txt-c" width="20%" style="border-left: none !important;">1.1.2.00.00</td>
<td class="txt-l" width="35%">Investasi Jangka Pendek</td>
<td class="txt-l" width="30%">Keterangan 2.2</td>
<td class="txt-c" width="15%" style="border-right: none !important;">
<?php
echo '<a href="' . site_url('akun/edit') . '"><button type="button" class="btn btn-primary" title="Edit Akun"><i class="fa fa-edit"></i></button></a>
<a href="#"><button type="button" class="btn btn-danger" title="Hapus Akun"><i class="fa fa-remove"></i></button></a>';
?>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Daftar Tags dan Nama Class yang dipakai Bootstrap

Bingung mencari nama class di bootstrap? Bootsrap secara default memakai font 14px pada tag <body> dan semua paragraf, sedangkan <p> memakai margin bawah 10px. Berikut saya berikan daftarnya:

Element/Class	Diskripsi
< h1 >< h6 > atau .h1 s/d .h6	h1 - h6 headings
< small >	Text lebih ringan Heading (secondary text)
.small	85% dari ukuran parent (parent= 14px)
.lead	Ukuran lebih besar dari parent (parent= 14px)
< mark > atau < kbd > atau < code >	Mark/ngeblok teks
< del >	Coret teks
< s >	Coret teks untuk yang lebih panjang
< ins >	Menggaris bawahi teks
< u >	Menggaris bawahi teks
< strong >	Teks tebal
< em >	Teks miring
.text-left / center / right / justify	Teks rata kiri / tengah / kanan / justify
.vcenter / .vtop / .vbottom	Teks vertikal middle / top / bottom
.text-nowrap	Teks tanpa pembatas
.text-lowercase	Huruf kecil semua
.text-uppercase	Huruf besar semua
.text-capitalize	Huruf besar huruf depan setiap kata saja
< abbr >	Memberikan title dengan garis putus-putus di bawah katanya
.initialism	Di < abbr > font lebih kecil
< address >	Informasi kontak
< blockquote >	Garis depan vertikal
.blockquote-reverse	Garis belakang vertikal
.list-unstyled	Hapus style di list
.list-inline	List secara horizontal, sudah dengan paddingnya
< pre > atau < pre class="pre-scrollable" >	Menjorok ke kanan
< dl >	Menunjukkan daftar diskripsi
.dl-horizontal	Menunjukkan daftar diskripsi secara horizontal
< var >	x=ab+y
< samp >	Teks renggang