Clash Royale CLAN TAG

How to fix IE11 div absolute positioning not filling td when other cell height is specified? (works on chrome na ff)

I have a table with fixed width columns and a cell with fixed height. Cell without specified height should have height equal to fixed height cell and its content should have hidden overflow.

table td {
border: 1px solid black;
width: 100px;
position: relative;
}
table td > .cell.row-height-indicator {
position: static;
height: 30px;
}
.cell {
padding: 10px;
position: absolute;
top: 0;
left:0;
right: 0;
bottom: 0;
overflow: hidden;
background-color: lightblue;
}

<table>
<tr>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell row-height-indicator">kljdslkdjsl</div></td>
</tr>
<tr>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell row-height-indicator">kljdslkdjsl</div></td>
</tr>
<tr>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell">kljdslkdjsl</div></td>
<td><div class="cell row-height-indicator">kljdslkdjsl</div></td>
</tr>
</table>

I this case .row-height-indicator height determines whole row height - and thats what i need.

On chrome and firefox it work as i expect - but IE has its own behaviour... In IE cells seems to not inherit row height.

Is there a way to fix this?

It Man

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.