Fluid/Fixed table

[Shaolin]

Hi Guys

I have a table with 3 rows. What I want to do is set row 1 and 3 to a fixed width of say 50px each and set the second row to fluid. So as the window is resized row 1 and 3 remain the same whereas 2 row grows or shrinks. Here is how far I have got:

Table:
<table border="1">
<tr>
<td class="tdDraft">Draft</td>
<td class="tdDraftContent">Dear John Smith...</td>
<td class="tdDraftDate">23/Jun/08</td>
</tr>
</table>

CSS:

.tdDraft {
width : 50px;
}
.tdDraftContent {
width : 100%;
}
.tdDraftDate {
width : 50px;
}

This works, but the only problem is that row 2 takes all the space and therefore leaves the other 2 rows squashed.

[datapunk79]

Your coding is right. The only reason that the two side tables look "squashed" is that they don't have enough content to fill them up. Once you start adding content to them you'll see they'll expand and stop at 50px.

[ray326]

I have a table with 3 rows.No, you have a table with 3 columns, the content of which doesn't appear to belong in a table.
... row 2 takes all the space and therefore leaves the other 2 rows squashed.You have instructed column 2 to consume 100% of the width of the row so the other columns have nowhere to go. You can't mix units in this case, you have to do it all in % or all in hard units or leave the width off the center column and let it do what it wants. Better yet, think about marking up your content meaningfully and doing the presentation later.