Question

I came across another difference between the browsers, namely in how they handle height on the tbody element.

<table>
 <tbody style="height:150px">
  <tr>
   <td style="border:1px solid">This is a test</td>
  </tr>
 </tbody>
</table>

Chrome ignores the height, FF and IE11 do not.

So, which ones have got it right? I searched, but I found no authoritative answers.

Visual formatting model details says of height

Applies to: all elements but non-replaced inline elements, table columns, and column groups

with no further restrictions, but W3C: Tables says

CSS 2.1 does not define the meaning of 'height' on row groups

(where row groups are the thead, tbody and tfoot elements.) So is this simply a grey area?

Answer 1

So is this simply a grey area?

The propdef implies that height does apply to row groups, but exactly what effect it has is left undefined. A property that applies doesn't always need to have a tangible effect on layout; it might do nothing in some circumstances. Whether doing nothing in all circumstances, as is the case with Gecko et al, is a valid interpretation is probably up for debate. The point the spec is making is that whether a UA conforms to CSS2 is not affected by how it chooses to treat height on row groups. So my answer to that question is "probably."

Having said that, the behavior remains undefined as of css-tables-3, which is still in development, although the resolution appears to be to match Firefox's behavior (see this issue).

As the behavior is currently not interoperable, authors should not rely on using height with row groups.

Should the height property be applied to table row groups?

1 个答案: