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
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%.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With