Re: [css3-layout] shorthand for slot construction

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:

1) The two tables look identical (except 1px of default padding in <td>)
2) The first two cells get as much space as possible.

To achieve your layout you need to go
<div style="display:table">
<div style="display:table-cell;width:20%;">1</div>
<div style="display:table-cell;width:46%;">2</div>
<div style="display:table-cell;width:33%">3</div>
</div>

(tested again, this works)

>>
>>> (and <table>s have explicit flex units already like
>>> <td width="1*">, btw) So vast majority of cases where we use
>>> flow:"template" now are simply not reproducible by display:table
>>> and even by <table>s.
>>
>> Can you explain this flex behavior further?
>>
>
> On this page:
> http://www.terrainformatica.com/htmlayout/fspu.whtm
> There is a table in "Example:" section just after
> "Imagine that four blocks below declared in CSS as:"
>
> It is declared as:
>
> <TABLE width="100%">
> <TR>
>  <TD width="100">width:100px<br>
>      <IMG height="1" src="spacer.gif" width="100">
>      <!-- the ugly "strut" needed to force the cell to have
>           needed size--></TD>
>  <TD width="30%">width:30%%</TD>
>  <TD width="70%">width:70%%</TD>
>  <TD width="150">width:150px<br>
>      <IMG height="1" src="spacer.gif" width="150"></TD>
> </TR>
> </TABLE>
>
> If you resize UA's window you can note that this table is flexible,
> two cells in the middle behave exactly as this (flow/flexes):
>
> <div style="flow:horizontal">
>  <div style="width:100px">width:100px</div>
>  <div style="width:3*">width:30%%</div>
>  <div style="width:7*">width:70%%</div>
>  <div style="width:150px;">width:150px</div>
> </div>
>
> This is not reproducible in CSS by any means.
> Not even with display:table/row/cell.

Go for
<div style="display:table">
<div style="display:table-cell;min-width:100px">A</div>
<div style="display:table-cell;width:30%">B</div>
<div style="display:table-cell;width:70%">C</div>
<div style="display:table-cell;min-width:150px">D</div>
</div>

This works in all browser I tested.

> As I said without flex units display:table is a dead born
> feature.

I'm not saying "death to flex units", just for most cases table is enough.

> Flex layout of tables and overflow:none; (imaginable) in cells
> is the main motivation why tables are used for page layouts
> on the web.

That was my point: table have been working perfectly, why do we need
to change this?

> Any advices to do not use tables for layout purposes
> without any means to replace them in CSS are cynical at least.
>
> [1] HTML 4.01 Relative Length Units defined here:
> http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-length
> (note they were defined in HTML in previous century)

And implemented in the previous century, it seems. Tested in modern
browser, they're just ignored.

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

Giovanni

Received on Tuesday, 20 October 2009 13:16:28 UTC