My table has cells with div elements of varying content, resulting in different heights. You can see an example of this in the following fiddle:
https://jsfiddle.net/6btarubL/2/
The code is simple:
HTML
<table>
<tr>
<td>
<div style="background-color: orange">
DIV
</div>
</td>
<td>
<div style="background-color: aqua">
Line 1<br>
Line 2
</div>
</td>
<td>
<div style="background-color: #fac">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color: #8f5">
DIV
</div>
</td>
<td>
<div style="background-color: #cb1">
Line 2.1<br>
Line 2.2
</div>
</td>
<td>
<div style="background-color: #eda">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
</table>
CSS
tr {
height: 100%;
}
td {
vertical-align: top;
min-width: 150px;
height: 100%;
}
td div {
height: 100%;
}
I want the divs inside the cells to take up all the space and appear uniform. Firefox achieves this, as shown in its rendering:
https://i.sstatic.net/kMWGd.png
However, Chrome does not comply with the height : 100% property for the divs, resulting in a different rendering:
https://i.sstatic.net/A4rcF.png
A curious observation is that Chrome used to render it like Firefox until I updated to version 63 (I had version 59 before).
Any suggestions? Thank you!