Memberikan Effect Rounded Pada table Bootstrap 3
hari ini, lagi kerjain project pake bootstrap 3 buat template htmlnya. trus pengen nambahin effect rounded pada tablenya. awalnya nambahin sintax sendiri di custom css nya, tapi malah gak sesuai keinginan, malah bordernya jadi double gitu. akhirnya googling sana ini baca di stackoverflow.
nemu beberapa solusi sintax css nya.
salah satunya : http://stackoverflow.com/questions/18729638/rounded-tables-in-twitter-bootstrap-3.
solusi yang mendapatkan vote lebih banyak saya cobain. eh, kasusnya tetap sama, table sih udah rounded tapi border insidenya jadi ke double.
akhirnya scroll ke bawa lagi nemu solusi dari Carsten Hess yang mesti tambahin div panel di luar tablenya. then it's work. walaupun harus ada beberapa sintax yang mesti ditambahin di cssnya.
<div class="panel panel-default">
<table class="table table-bordered">
....
</table>
</div>
buat costum ukuran radiusnya tambahin di custom css nya.
.panel-default{
border-radius: 8px; /* ukuran radiusnya */
overflow: hidden; /* fix biar sudut tablenya gak keluar dari panel */
}