Cara membuat tabel responsive pada blog

Halo blogger, tabel biasanya digunakan sebagai media penjelasan agar pembahasan terhadap sesuatu permasalahan lebih terperinci. Nah, begitu pula pada blog tabel juga diperlukan untuk kebutuhan penjelasan agar terperinci secara jelas. Selain itu, dengan menggunakan tabel yang responsive pada blog menambah nilai kerapian dan terkesan sangat profesional.

Dari penjelasan singkat diatas sebelumnya admin telah membuat artikel serupa yaitu Cara gampang membuat tabel responsive pada postingan blog dari kedua metode ini silahkan kalian pilih mana yang paling cocok untuk diterapkan.

Cara membuat tabel responsive pada blog
  • Masuk ke dashboard blog milik anda
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode ]]</b:skin> lalu tambahkan kode dibawah ini tepat diatas kode ]]</b:skin>
table​{​background-color​:transparent;​width​:​100%​;​max-width​:​100%​;​margin-bottom​:​20px​} table img​{​width​:​100%​;​height​:auto} table​.tr-caption-container​{​padding​:​0​;​border​:none} table td​.tr-caption​{​font-size​:​12px​;​font-style​:italic} table​{​border-spacing​:​0​;​border-collapse​:collapse} td,th{padding:0} th{text-align:left} .table​{​width​:​100%​;​max-width​:​100%​;​margin-bottom​:​20px​} .table a​{​text-decoration​:none​!important​} .table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td​{​padding​:​8px​;​line-height​:​1.42857143​;​vertical-align​:top} .table > thead > tr > th​{​background-color​:​#3498DB​;​color​:​#fff​;​vertical-align​:bottom} .table > thead > tr > th a{color:#fff!important} .table > caption + thead > tr:first-child > th,.table > colgroup + thead > tr:first-child > th,.table > thead:first-child > tr:first-child > th,.table > caption + thead > tr:first-child > td,.table > colgroup + thead > tr:first-child > td,.table > thead:first-child > tr:first-child > td{border-top:0} .table > tbody > tr​:nth-of-type(odd)​{​background-color​:​#f9f9f9​} table col​[class*="col-"]​{​position​:static;​display​:table-column;​float​:none} table td[class*="col-"],table th​[class*="col-"]​{​position​:static;​display​:table-cell;​float​:none} .table-responsive​{​min-height​:.​01%​;​overflow-x​:auto} @media screen and (max-width:​767px​){​.table-responsive​{​width​:​100%​;​margin-bottom​:​15px​;​overflow-y​:hidden;​-ms-overflow-style​:-ms-autohiding-scrollbar}​.table-responsive > .table​{​margin-bottom​:​0​}​.table-responsive > .table > thead > tr > th,.table-responsive > .table > tbody > tr > th,.table-responsive > .table > tfoot > tr > th,.table-responsive > .table > thead > tr > td,.table-responsive > .table > tbody > tr > td,.table-responsive > .table > tfoot > tr > td​{​white-space​:nowrap}​.table-responsive > .table-bordered​{​border​:​0​}}
  • Setelah itu simpan tema
  • Selanjutnya, berikut penulisan tabel dalam postingan blog (pada menu HTML bukan di COMPOSE)
<div class​=​"table-responsive"​>
<table class="table">
<thead>
  <tr>
    <th>Nama</th>
    <th>Keterangan</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Faronesia</td>
    <td>Faronesia</td>
  </tr>
  <tr>
    <td>Faronesia</td>
    <td>Faronesia</td>
  </tr>
  <tr>
    <td>Faronesia</td>
    <td>Faronesia</td>
  </tr>
</tbody>
</table>
</div>
Catatan:
Ubah dan tambah tabel sesuai keinginan anda.

Semoga tutorial singkat Cara membuat tabel responsive pada blog ini bermanfaat, jangan lupa share dan komentar dibawah.

Iklan Atas Artikel

grup blogger indonesia

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel