Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome 50 Change in implicit table-cell height behaviour

See jsFiddle.

<table>
  <tr>
    <td>
      <div>
        Hello World
      </div>
    </td>
  </tr>
</table>

html, body {
  height:100%;
  background-color:steelblue;
  margin:0;
}

table {
  height:100%;
  border:1px;
}

td {
  border:1px;
}

tr {
  background-color: green;
}

div {
  background-color:salmon;
  height:100%;
}

Prior to Chrome 50, a table with height 100% would also implicitly apply height 100% to it's table cells.

This has been a longstanding bug in Firefox and IE versions < 11. Chrome and Safari have always passed the implicit percentage height onto the cells.

What is the correct behaviour according to the specifications? Has this been introduced by design?

Edit: Chromium Bug Report

like image 869
Brett Postin Avatar asked Apr 15 '16 09:04

Brett Postin


1 Answers

This appears to be the same question as this Chromium issue, which was closed over 2 months ago. According to the comments there, the new behavior in Chrome 50 is "more spec compliant".

So, to answer your question, it would appear this is intentional, and is considered (at least by the Chromium developers) to be the correct behavior according to the specifications.

The solution, naturally, is to just explicitly set the cell's height to 100%.

like image 90
Tomty Avatar answered Nov 15 '22 19:11

Tomty