W3C home > Mailing lists > Public > www-style@w3.org > March 2015

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

From: Gérard Talbot <www-style@gtalbot.org>
Date: Sun, 08 Mar 2015 15:47:39 -0400
To: Greg Whitworth <gwhit@microsoft.com>
Cc: www-style list <www-style@w3.org>
Message-ID: <e45330168b8bb2c1295f15836ca8178d@gtalbot.org>
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.

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.

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 

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.



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


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

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:52 UTC