Cara membuat tabel boostrap otomatis wrap di mobile view / small devices

Tidak Ada Tanggapan

Ketika menggunakan tabel responsive di bootstrap terkadang kita menemukan tabel tidak melakukan wrapping di small devices. Tabel hanya menampilkan scroll panjang menyamping dan kamu harus scroll ke samping sampai menemukan konten yang kamu inginkan.

Untuk mengatasi masalah itu tambahkan css berikut ini agar tabel dapat dilihat sesuai yang diinginkan.


<style>
@media
    only screen and (max-width: 767px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {
        .table-responsive > .table > tbody > tr > td {
            white-space: inherit;
        }
     }
</style>