Creating Fixed Width Table Columns (CFWTC)

In the past, I had a problem when I wanted to set the table display to be properly, not "ting plethot" in Javanese, so that the table-head and the columns were truly aligned, not "off-center".

The problem is that this table is generated from the CodeIgniter table class, so I have difficulty when I want to customize it. It's different if I use html boilerplate to create a table, of course it would be very easy for me to set it manually in certain parts.

But that doesn't mean this problem is difficult to solve, there is still a solution by applying the following concept.

Let's say I have a table with 5 columns. I want the column width to look like this 30%,20%,10%,30%,10%, can anyone help me?

<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>

OK, that code actually works fine when the table-header has sufficient text length, but falls short when the text length is insufficient.

The solution is to add  style="table-layout: fixed;" and apply  overflow:hidden; di <td>.

Now everything is fine, congratulations!