Cara Membuat Tabel Responsive

Tabel Responsive Tanpa Bootstrap

Untuk membuat tabel agar responsive umumnya kita menggunakan twitter bootstrap. Ada juga yang menyediakan fitur serba responsive lainnya seperti bulma, foundation dan sebagainya. Tidak sedikit pula yang memahami pemrograman CSS lebih memilih desain tabel dalam bentuk list (daftar).
Cara Membuat Tabel Responsive
Cara Membuat Tabel Responsive

Akan tetapi, disini kita akan menggunakan 1 baris kode saja agar tabel yang kita buat menjadi responsive tanpa repot-repot memikirkan dan menggunakan javascript, jquery atau bootstrap js. Satu baris kode itu adalah:
overflow-x:auto;

Bagaimana Cara Menggunakan overflow-x:auto; pada Tabel agar Responsive

Pertama, buatlah terlebih dahulu konsep tabelnya. Misalnya ada; 5 kolom, 4 baris, yang rinciannya sebagai berikut:


<table>



<tr>



<th>No</th>



<th>Nama Lengkap</th>



<th>Usia</th>



<th>Pekerjaan</th>



<th>Alamat</th>



</tr>



<tr>



<td>1</td>



<td>Khairul Annas</td>



<td>150 tahun</td>



<td>Online Broker</td>



<td>Lampung</td>



</tr>



<tr>



<td>2</td>



<td>Ramdhani Eva</td>



<td>194 tahun</td>



<td>Graphic Designer</td>



<td>Papua Nugini</td>



</tr>



<tr>



<td>3</td>



<td>Metra Fajri</td>



<td>467 tahun</td>



<td>Restaurant Manager</td>



<td>Jerman</td>



</tr>



</table>


 
Kedua, Membungkus tabel tersebut dengan DIV element, semisal
 
<div>
<!-- tabel disini -->
</div>
 
Kemudian, tambahkan kode diatas pada element DIV, sbb:
 
<div style="overflow-x:auto;">
 
Sehingga keseluruhan menjadi:


<div style="overflow-x:auto;">



<table>



<tr>



<th>No</th>



<th>Nama Lengkap</th>



<th>Usia</th>



<th>Pekerjaan</th>



<th>Alamat</th>



</tr>



<tr>



<td>1</td>



<td>Khairul Annas</td>



<td>150 tahun</td>



<td>Online Broker</td>



<td>Lampung</td>



</tr>



<tr>



<td>2</td>



<td>Ramdhani Eva</td>



<td>194 tahun</td>



<td>Graphic Designer</td>



<td>Papua Nugini</td>



</tr>



<tr>



<td>3d</td>



<td>Metra Fajri</td>



<td>467 tahun</td>



<td>Restaurant Manager</td>



<td>Jerman</td>



</tr>



</table>




</div>


 


Berikut ini demo tabel responsive: 








    

      No      Nama Lengkap      Usia      Pekerjaan      Alamat    


      1      Khairul Annas      150 tahun      Online Broker      Lampung    


      2      Ramdhani Eva      194 tahun      Graphic Designer      Papua Nugini    


      3      Metra Fajri      467 tahun      Restaurant Manager      Jerman    















Untuk Mempercantik tampilan tabel dapat diberi polesan sedikit dengan menggunakan CSS; Contoh:







<style>



table {



    border-collapse: collapse;



    border-spacing: 0;



    width: 100%;



    border: 1px solid #ddd;



}



th, td {



    border: none;



    text-align: left;



    padding: 8px;



}



tr:nth-child(even){background-color: #f2f2f2}



</style>



Hasil Final: 

 




    

      No      Nama Lengkap      Usia      Pekerjaan      Alamat    


      1      Khairul Annas      150 tahun      Online Broker      Lampung    


      2      Ramdhani Eva      194 tahun      Graphic Designer      Papua Nugini    


      3      Metra Fajri      467 tahun      Restaurant Manager      Jerman    















































Comments











Post a Comment































Popular posts from this blog









SURVIVAL FOR SUCCESS  https://meraihsingkronisasikesuksesan.blogspot.com/2017/09/survival-for-success.htm




















Image







  SURVIVAL(BERTAHAN HIDUP) FOR SUCCESS      SURVIVAL FOR SUCCESS      Surviva l  dalam arti umumnya adalah bertahan hidup di alam bebas.Bagi para petualang di alam bebas seperti para pendaki gunung dan pecinta alam tentu kata survival sudah tidak asing lagi, karena itulah sudah jadi bagian yang tidak terpisahkan,dalam setiap melakukan kegiatan petualangan nya itu tidaklah jarang akan bertemu dengan situasi dan kondisi keadaan yang mengharuskan diri kita melakukan survival yaitu cara diri kita bisa bertahan hidup di alam bebas.Untuk suatu hal yang urgent dan darurat kapanpun dan dimanapun,tidak terbatas pada apapun dan siapapun.Pastilah secara naluri manusia,kita akan bergerak untuk berbuat dan berusaha menjaga juga melindungi serta mempertahankan diri semampu dan sebisanya menurut pengetahuannya     Jadi untuk itulah survival atau cara bertahan hidup sangat-sangat dibutuhkan dan diperlukan sekali.Tapi untuk dapat menguasai dan memahami akan teknik-teknik dasar,tentang cara dan bagaiman...








Keep reading










Dua Idiologi Matrealis




















Image







    Idiologi Matrealis    Sungguh tidak bisa di pungkiri kemajuan zaman begitu cepat di segala bidang perubahan-perubahan yang drastis memaksa kita di tuntut ikut  serta dalam perubahan  baik di segi apapun. Pasilitas dunia tercipta dengan begitu gencar tanpa bisa terbendung lagi, keinginan,hasrat memiliki menjadikan kita budak nafsu kekuasaan dengan tidak mengindahkan norma-norma etika  karena idiologi  matrealistis telah menjadi budaya.     Dua idiologi matrealis, yaitu Kapitalis dan Neo liberal. Suatu  idiologi berlatar ekonomi yang pada prinsipnya berazaskan pada jumlah materi. Baginya, masalah ke seuntungan lebih penting dari sekedar masalah ke sebangsaan atau golongan agama Meski tidak termuat dalam undang-undang dasar negara dan norma budaya, namun dalam prakteknya ia telah  menjadi   idiologi paling aktif, paling halus     Dua Idiologi Matrealis     Materialisme  adalah paham dalam filsafat yang menyatakan bahwa hal yang dapat dikatakan be...








Keep reading










BINTANG KESUKSESAN DI BULAN BAHAGIA    Bahagianya hidup yang  tidak dapat  diucapkan dengan kata-kata  dan juga tak bisa dituangkan lewat kanvas  untuk dilukiskan.atau digambarkan walau dengan seketsa saja, Apa   harus abstrak.  Sayang alirannya realis atau naturalis,Kalau tidak pasti penuh warna cerah goresan kwas diatas kanvasnya.




















Image







                BINTANG KESUKSESAN DI BULAN BAHAGIA     BINTANG KESUKSESAN DI BULAN BAH AGIA   Bahagianya hidup yang  tidak dapat  diucapkan dengan kata-kata  dan juga tak bisa dituangkanlewat kanvas  untuk dilukiskan.atau digambarkan walau dengan seketsa saja, Apa   harus abstrak. Sayang alirannya realis atau naturalis,Kalau tidak pasti penuh warna cerah goresan kwas diatas kanvasnya.          Sungguh indah bulan menghias di  cakrawala hati .Dengan begron altar dasar  malam purnamamu.  Oh   yang tersenyum saat menyapa lembut hari.Apa kabar..HAI.Begitu sayu mata itu saat menoleh tapi sinarnya begitu minyiratkan kepuasan dan sepertinya menikmati  tatapan yang begitu dalam ke    arah   setapak jalan kehidupan yang menbentang,berkelok-kelok yang kadang turun naik diselingi bebatuan       Dengan suara tenang  dan nada santai begitu jelas kalimat perkalimatnya penuh rmerasa kebanggaan   yang mendal...








Keep reading










SATU KATA TENTANG CINTA   https://meraihsingkronisasikesuksesan.blogspot.com/2017/10/.html




















Image







  ARTI  SATU KATA  TENTANG    LOVE       SATU KATA TENTANG CINTA                              Satu kata tentang cinta  yaitu indah,dimana hati dipenuhi rasa yang berbunga - bunga akan kebahagian, serta naluri  manjanya selalu ingin kasih dan  sayang  yang tercurah penuh saling perhatian satu sama lain. Sebab tidak ada nilai dan bandingannya dengan apapun bila sedang merasa diri jatuh cinta, karena begitu dalam arti dan maknanya bagi siapapun yang mengalaminya. Sungguh kekuatan yang dahsyat, sepasang  hati  menyatukan rasa tidak lagi mengenal batasan baik laki - laki maupun perempuan, sepertinya penaklukan diri atas apa yang diperjuangkan dan sudah tertanam di jiwa, itu  merupakan sebuah anugrah  yang terrlahir  dari dorongan hasrat, daya tarik dan kertertarikan  serta pada akhirnya  bila itu terjadi, maka akan terjalin suatu harmony yang  sinkron karena salin...








Keep reading










HAPPY FOR SUCCESS https://meraihsingkronisasikesuksesan.blogspot.com/2017/08/happy-for-success.html




















Image







                      HAPPY BOLEH TAPI UNTUK SUCCESS   HAPPY FOR SUCCES S     Dalam kondisi sulit menghadang kita, tidak perlu ditanggapi dengan sikap pesimis dan terbeban. Perlu kita yakini dan kita sadari bahwa di setiap kesulitan yang mampu kita atasi, maka bersamaan itu pula akan muncul kesempatan baru yang memungkinkan kita melanjutkan dan memperjuangkan usaha kita hingga mencapai kesuksesan.       Tetapi di dalam kenyataannya yang sering terjadi, pada saat kita dihadapkan pada kesulitan, rintangan, kesalahan dan problem yang bermunculan, fighting spirit kita menjadi turun, rapuh, dan mudah menyerah; semuanya terasa begitu berat dan membebani mental, bahkan tidak jarang membuat kita merasa gagal, frustasi, depresi, putus asa, menganggap ini semua merupakan suratan nasib yang memang harus kita alami.     Mengapa kita mudah menyerah? Mengapa kita cepat merasa gagal? Sebenarnya perasaan di atas ini adalah akibat dari hasil pikiran atau...








Keep reading










MANUSIA DAN SOLUTION http://meraihsingkronisasikesuksesan.blogspot.com/2017/08/manusia-dan-solution.html




















Image







                         MANUSIA DAN SOLUTION HIDUP      MANUSIA DAN SOLUTION    Manusia .Hidup itu adalah masalah. Berani hidup berarti berani menghadapi tantangan dari setiap sifat dan laku permasalahan di dalam kehidupan. Bagaimana tidak? Mari kita lihat sejenak, misalnya: pada saat ibu mengandung dan akan melahirkan maka timbullah masalah. Apa masalahnya? seseorang akan  mulai tumbuh, menjadi remaja dan dewasa.dalam prosesnya seakan-akan tidak satupun bagian dari hidup ini yang tidak ada masalah nya.Tapi semua itu adalah hukum alami.     Karena berani hidup berarti berani menghadapi masalah hidup Masalah bisa datang dari dalam diri sendiri dan dari luar. Wujud masalah itu bisa berupa masalah kecil/sepele, bisa juga masalah besar. Masalah juga bisa sederhana bisa juga kompleks (rumit). Bila masalah dan permasalahan yang ada telah sedemikian kompleks, maka akan membutuhkan banyak sumber daya, tenaga, pemikiran dan d...








Keep reading










MENEMUKAN KESUKSESAN DALAM DIRI  https://meraihsingkronisasikesuksesan.blogspot.com/2017/07/menemukan-kesuksesan-dalam-diri.html




















Image







     Menemukun kesuksesan dalam                                                                                                                                                                                                                     Jadilah diri sendiri pasti sukses !                                                         ...








Keep reading










POTENSI KESUKSESAN DIRI




















Image







                 MENGGALI POTENSI KESUKSESAN DIRI    MENGGALI POTENSI KESUKSESAN DIRI      Seseorang yang telah mempunyai tujuan yang pasti dan bisa membangun kehidupan secara matang, maka  orang itu adalah orang yang bisa berfikir serta berjiwa bijak menilai tentang kehidupannya sendiri Mempunyai tujuan yang jelas, perencanaan yang matang, mencari dan menggali segala potensi diri, bekerja keras, tekun dalam meraih tujuan dan berdoa, proses itu harus dilakukan dengan fikiran dan hati.       Mulailah  untuk bermimpi, berencana, belajar dan bekerja untuk apa yang anda inginkan hari ini. Potensi anda akan membuat ruang bagi pencapaian mimpi-mimpi anda, dan kesuksesan anda akan membawa nilai dan kesenagan bagi diri anda dan semua orang yang ada disekitar Anda.Mimpikanlah sesuatu dan jadikanlah mimpimu itu kenyataan, karena sebenarnya tak akan ada dunia ini jika tak ada yang bermimpi dan semua berawal dari mimpi.    Jadikanlah apa yang diraih oran...








Keep reading










Merubah Sikap Negatif Menjadi Positif




















Image







  Merubah Sikap Negatif Menjadi Positif    Merubah Sikap Negatif Menjadi Positif        Merubah sikap negatif menjadi sikap positif bukanlah hal yang bisa dikerjakan dalam waktu yang singkat. Terutama bila kebiasaan yang lama telah dipraktekkan sekian lama dan telah membawa rasa nyaman sementara bagi individu.      Dibutuhkan niat untuk berani mencoba dan mengubah hal lama yang sudah ada dan menggantinya dengan kebiasaan bersikap positif yang lebih efektif. Tetapi sama seperti seorang anak manusia yang tidak tumbuh dewasa dalam 1 malam, maka pengembangan sikap positif juga memerlukan waktu untuk bertumbuh. Sama seperti perkembangan anak manusia yang membutuhkan nutrisi untuk bertumbuh, maka agar sikap positif dapat terus bertumbuh dengan baik, penambahan informasi baru harus terus menerus dilakukan. Oleh karena itu, mengikuti seminar, membaca buku, berbincang dengan orang yang memiliki sikap positif akan menjadi pilihan ”makanan bernutrisi” bagi pertumbuhan sikap positif anda.     ...








Keep reading










MENCAPAI KESUKSESAN https://meraihsingkronisasikesuksesan.blogspot.com/2017/08/sebuah-kesuksesan.html




















Image







  MENCAPAI  KESUKSESAN         SEBUAH KESUKSESAN          Inti dari motivasi adalah sebuah arti kekuatan yang berasal dari dalam diri kita sendiri.Jadi motivasi bisa dikaitakan atau dihubungkan dengan keinginan atau pendorong keinginan itu.Untuk itulah jadi sebuah motivasi sangat berpengaruh pada kehidupan kita.      Sebuah motivasi hidup sukses.   Mereka yang telah meraih sukses tak akan pernah mengenal kata menyerah, yang ada adalah belum berhasil.Jadikanlah apa yang diraih orang lain sebagai motivasi untuk anda. Yakinlah anda juga pasti bisa, dan tetaplah bersyukur dengan apa yang telah anda miliki saat ini.  Jika anda mengerjakan akan sesuatu , maka kerjakanlah semua itu dengan sepenuh hati.Jika anda bekerja seadanya, maka hasilnya yang akan anda dapatkan pun akan seadanya.     Jujur adalah sifat mutlak yang ada pada setiap manusia.Dengan kejujurannya akan menuntun manusia pada pintu kebahagiaan yang hakiki. Oleh karena itu seseorang yang tidak pernah jujur dalam hidu...








Keep reading