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;
}
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;
}
table-layout by default is set to auto which means it will be as wide as the widest unbreakable content in the cells. fixed will take into consideration your width settings in the css. Note that not everything breaks, the percentage widths in the middle two columns will continue to be 30% and 70%.td elements on the left and right have expanded to fit the non-breakable content inside of them. In total the table will be 100% of the page including the default margins and padding.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% }
