Re: [css3-flexbox] intuitivity and width computation rules

On Thu, Jan 13, 2011 at 8:56 AM, Rob Crowther <robertc@boogdesign.com> wrote:
> Yes, since I'm particularly interested in how these things are applied to
> elements which aren't tables.  Like for instance in a setup like this:
>
> body:table
>  div:table-row
>  div:table-row
>    div:table-cell
>    div:table-cell
>    div:table-cell
>  div:table-row
>
> Why do the first and last div become the width of the first child div of the
> second div?  It happens consistently across Firefox, Opera and Chrome so I
> assume there is some agreement of how it should work, but why are the three
> table-row divs not all the same width?

The table-repair algorithms end up wrapping the contents of the first
and last table-row in an anonymous table-cell box.  It then acts just
like tables normally do when you have an uneven number of cells - it
matches cells up as best it can, and leaves empty spaces at the ends
of rows without enough cells.

Unfortunately, you can't do rowspans or colspans with CSS table stuff
right now.  I assume the reason you brought up that particular setup
is because you have a header in the first row, footer in the last row,
and a 3-col content area in the middle?  If that's the case, don't put
the entire thing in a table, just the middle area, like this:

<div #header>...</div>
<div #main display:table width:100%>
  <div display:table-cell>...</div>
  <div display:table-cell>...</div>
  <div display:table-cell>...</div>
</div>
<div #footer>...</div>


> PS. Apologies for veering off the topic of the thread here - is there a
> css3-tables spec?  I see there's a "CSS Tables Module" with no actual
> document on the current work page, and there's a css3-tables-algorithm in
> CVS, but that doesn't seem to be very far along.

Yeah, years ago someone started working on an actual table layout
spec, but it was never finished.

~TJ

Received on Thursday, 13 January 2011 17:44:05 UTC