Cara Membuat Kolom Tabel Fixed Width

Dulu aku pernah mengalami masalah saat ingin mengatur tampilan tabel menjadi properly tidak "ting plethot" istilah jawanya, jadi antara tabel-head dengan kolomnya bener-bener sejajar tidak "menceng".

Masalahnya tabel ini adalah hasil generate dari class table CodeIgniter, jadi aku kesulitan saat ingin meng-customnya. Berbeda jika aku menggunakan boilerplate html untuk membuat tabel, tentu akan sangat mudah bagiku untuk mengaturnya secara manual di bagian tertentu.

Tapi bukan berarti masalah ini sulit diatasi, tetap ada solusinya dengan cara menerapkan konsep berikut.

Katakanlah aku punya tabel dengan 5 kolom. Aku ingin tampilan lebar kolomnya seperti ini 30%,20%,10%,30%,10%, adakah yang bisa bantu saya?

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

<table class="span12">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</th>
      <td>Val 2</th>
      <td>Val 3</th>
      <td>Val 4</th>
      <td>Val 5</th>
    </tr>
  </tbody>
</table>

Oke, kode itu sebenarnya sudah bekerja dengan baik ketika table-header mempunyai panjang text yang cukup, tapi kurang ketika panjang text tidak mumpuni.

Solusinya adalah dengan menambahkan style="table-layout: fixed;" dan menerapkan overflow:hidden; di <td>.

Sekarang semuanya beres, selamat!