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.

1 Response to "Cara membuat tabel responsive pada blog"

  1. thanks gan artikelnya, sangat membantu. jika anda ingin info seputar hidup sehat yuk kunjungi www,dinisehat,id

    -salam sehat

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Website ini dilindungi oleh Google DMCA. Dilarang keras menyalin (copy/paste) sebagian atau keseluruhan isi blog tanpa mencantumkan sumber link aktif dari website www.faronesia.com