Re: [css3-layout] shorthand for slot construction

2009/10/20 Andrew Fedoniouk <news@terrainformatica.com>:
> 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.

Yes

> Is such behavior defined somewhere?

Informatively in CSS2 17.5.2.2 and normatively in
css3-tables-algorithm, available at
<http://dev.w3.org/csswg/css3-tables-algorithm>.

> 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?

table-layout: fixed

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

But they work.

> --
> Andrew Fedoniouk.
>
> http://terrainformatica.com
>

Giovanni

Received on Tuesday, 20 October 2009 19:08:48 UTC