Posted by Rik on 06/24/06 23:07

Jonathan N. Little wrote:
> Rik wrote:
> <snip>
>> Answer to op's problem:
>> In rendering a table browsers seem to take the width including the
>> borderwidth, and on div's without borderwidth.
>>
>> Solution to op's proble"m:
>> Use percentual margins, and make a table-cell 100%.
>
> Good work! I'll log that on in the old memory banks. Just for further
> info, the margin does not have to be a percent, just has to be set and
> set the same for both TABLE and DIV.

Yup, but if the problem of OP was a fixed width, I'd have told him to reduse
the size of the div by 2times borderwidth, which in this case would have
been shorter.

> And the table just has to have
> one cell per row set to 100%. For best practice should be in your CSS
> and not your markup:
>
> TD.inthemiddle { width: 100%; }

Yup, only 1 is needed indeed.

> ...
> <tr><td>left</td><td class="inthemiddle">By Margins</td><td>right</td>
>
> Of course if IE were a browser you could have eliminated the extra
> class all together with an adjacent sibling selectors
>
> /* sets the 2nd TD in table to 100% width not 'inthemiddle' needed
> */ TABLE.bymargin TD + TD { width: 100% }

If we're dreaming of css-compliancy, and taknng random cells, why not:
table.bymargin td:first-child{width: 100%;}

That would make the first cell 100%, regardless wether there are any other
table-cells. Offcourse, if you have only one table-cell in very row of a
table, one should think long and hard about wether it should be a table...
Probably it an (un)orderded list is more apropriate.

Grtz,
--
Rik Wasmus

[Back to original message]