CSS Table columns width: fixed - dynamic(30%) - dynamic(70%) - fixed

Question

I managed to obtain this kind of table layout:

fixed - dynamic(50%) - dynamic(50%) - fixed

http://jsfiddle.net/ihtus/ksucU/

But how do I get this kind? fixed - dynamic(30%) - dynamic(70%) - fixed

Here's my CSS:

table {
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

td {
    border: 1px solid #333;
}

Answer 1

Like this:

<table>
    <tr>
      <td style="width:200px;">
        200px width - content
      </td>
      <td width="30%">
        dynamic width - content
      </td>
      <td width="70%">
        dynamic width - content
      </td>
      <td style="width:100px;">
         100px width - content
      </td>
    </tr>
  </table>

table {
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

td {
    border: 1px solid #333;
}

http://jsfiddle.net/7dSpr/

Answer 2

The general approach is the same as the one Monkieboy used, but you should avoid inline styles. ( by that I mean writing style="someting" ) in your html file. You should use classes and CSS instead.

First give the td a class like this <td class="thin-column">text here</td>, then in your CSS use that to apply styles: .thin-column:{ width: 30% }