Re: [css-tables][css2.1] What should the measurement of the table be?

Le 2015-03-08 00:19, Greg Whitworth a écrit :
> Another interop issue I would appreciate input on from the WG. This
> one unfortunately is not as clear cut (most table issues aren't), but
> I do believe based on regular table markup that IE is doing the
> correct thing here. Here is the testcase:
> http://jsbin.com/yutipulode/1/edit?html,css,output
> 
> It should be noted that I did add CSS for display: table-row as well
> as table-row-group just in case it was a mistake in the fix up step of
> FF or Chrome and both exhibited the same end result so I don't believe
> it has to do with that.
> 
> This is how it breaks down:
>     IE: All three of them render the same way
>     Chrome: Renders the first one as 202px tall with a scroll bar (I
> think this is a bug, because changing overflow-y to hidden should not
> have an effect on the sizing of the table cell). Renders the last 2
> identically
>     Firefox/Presto: Renders the CSS based tables at 202px tall but an
> actual table it renders as IE does.
> 
> Personally, I think that any time you use CSS tables it should have
> the same end result as using actual tables, thus I think IE has the
> correct behavior here but am willing to listen to arguments on why
> Clamping the table height in a CSS table while not doing that for a
> regular table makes sense.
> 
> Thanks,
> Greg



.replay {
   height: 100%;
   ...
   }

"
CSS 2.1 does not define how the height of table cells and table rows is 
calculated when their height is specified using percentage values.
"
http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#height-layout

This will affect the HTML table (3rd table); it may be ignored and, like 
Boris said, it must be ignored anyway since the <table>'s 'height' is 
'auto' to begin with.

-------

In this chunk of code:

<div class="lichess_ground" style="display: table-cell; height: 202px;">
       <div class="replay" style="height: 100%;">

'height: 100%' is not ignored and can be computed and rendered.

-------

Another issue with the code is that the cell has a border and that 
creates an overconstrained situation:

<div class="lichess_ground" style="display: table-cell; height: 202px;">
       <div class="replay" style="height: 100%; border: 1px solid #ccc;">

"
In CSS 2.1, the height of a cell box is the minimum height required by 
the content.
"
http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#height-layout

So, the height of the table cell must increase to 204px... which may not 
be (highly probable) what the original author initially aimed at/for.

Computed height value in Firefox36 is, as expected, **_204px_** and not 
202px.

Computed height value in Chrome41.0.2272.76 is **_202px_**: that's a 
bug. And notice that inner div gets resized to 200px. Chrome resizes the 
descendant when it should be resizing the cell.

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/overconstrained-CSS-table-cell-height.html

------

The 3rd table (the <table> one) in

http://jsbin.com/yutipulode/1/edit?html,css,output

definitely has its cell using a 'padding: 1px' . This is not the case 
for the top first 2 CSS tables.

Gérard

Received on Sunday, 8 March 2015 19:48:10 UTC