Re: [css3-layout] shorthand for slot construction

Giovanni Campagna wrote:
> 2009/10/20 Andrew Fedoniouk <news@terrainformatica.com>:
>> Tab Atkins Jr. wrote:
>>> On Mon, Oct 19, 2009 at 11:43 AM, Andrew Fedoniouk
>>> <news@terrainformatica.com> wrote:
>>>> CSS tables cannot reproduce <table> layout.
>>>> colspan/rowspan and their flex behavior.
>>> There's been talk about adding rowspan/colspan.  It's very likely
>>> that'll show up in either Tables level 3 or 4.
>>>
>>> What part of the flex behavior isn't present in the Tables module?
>>>
>>>> width=100% in tables is very far from width:100% in CSS.
>>> Afaik, width=100% on a <table> is just sizing the border-box.  In
>>> other words, <table>s just have an automatic box-sizing:border-box
>>> applied by the UA.
>> width="100%" on table is close to the following:
>>
>> table
>> {
>>  width:100%;
>>  box-sizing: border-box;
>>  overflow: none; /* hypothetical "newer overflow" or this: */
>>  min-width: min-intrinsic;
>> }
> 
> Agreed on the first two, the others are only if "table-layout:auto",
> and therefore it's specified by CSS2 17.5.2.2
> 
>> But width/height="XX%" for table cells is completely different thing.
>>
>> Set of cells having width="XX%" in percents in case of
>> sum of percents is equal or greater than 100% is turning into
>> the flex computation.
> 
> Same as CSS Automatic Table Layout (introduced by HTML4, included in
> CSS2, replaced by CSS21, made normative by css3-tables-algorithm).
> 
>> So this:
>>
>> <TD width="30%">1</TD>
>> <TD width="70%">2</TD>
>> <TD width="50%">3</TD>
>>
>> will be precisely this (using HTML 4.0 relative units [1]):
>>
>> <TD width="3*">1</TD>
>> <TD width="7*">2</TD>
>> <TD width="5*">3</TD>
>>
>> or this if to use flexes:
>>
>> <TD style="width:3*">1</TD>
>> <TD style="width:7*">2</TD>
>> <TD style="width:5*">3</TD>
>>
> 
> Not really.
> Tried with
> <!doctype HTML>
> <style>div, table, td { border:1px solid black;
> border-collapse:collapse; }</style>
> <div style="display: table;width:100%">
> <div style="display: table-cell; width: 30%;">1</div>
> <div style="display: table-cell; width: 70%;">2</div>
> <div style="display: table-cell; width: 50%;">3</div>
> </div>
> <table width="100%">
> <tbody><tr><td width="30%">1</td>
> <td width="70%">2</td>
> <td width="50%">3</td>
> </tr></tbody></table>
> 
> (style added for clarity)
> in FF3.5, Opera 10, Konqueror 4.3 and Arora 0.10 and:


That is is just an ugly (and buggy) attempt to fix the problem in
mentioned engines.

Take a look here:

     <div style="display: block;width:30%; border-color:red"></div>
     <div style="display: table;width:100%">
       <div style="display: table-cell; min-width: 100px;">0</div>
       <div style="display: table-cell; width: 30%;">1</div>
       <div style="display: table-cell; width: 70%;">2</div>
       <div style="display: table-cell; min-width: 100px;">3</div>
     </div>

the first div is a marker that shows how width:30% should look like.

It seems like in mentioned engines table-cell value of display
attribute is changing the meaning of percent length units.

Is such behavior defined somewhere?

So instead of 30% of parent width they use some percents as
sort of flexes.

How then to set width of display:table-cell element to
30% width of its container?

These display:table-*** dances looks like dirty hack here.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Tuesday, 20 October 2009 16:27:52 UTC