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

Le 2015-03-08 15:47, Gérard Talbot a écrit :
> 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


A more noticeable, glaring test:

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

IE11, Firefox 36 and Opera 12.16 (Presto engine) pass this test.

Chrome 41.0.2272.76 fails this test.

Gérard


> 
> ------
> 
> 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 20:23:31 UTC