How to make a div inside table td with height 100%?
Problem 😱
Let’s say we have a following html table:
<table style="height: 1px;">
<tbody>
<tr>
<td class="full-height">
<div class="full-height" style="background: red;">
height 100%
</div>
</td>
<td>
1<br/>
2<br/>
3<br/>
</td>
</tr>
</tbody>
</table>with css:
.full-height { height: 100%; }Result:
We want the red part to have a full height of the row but height: 100% on div and td is not enough.
Solution 🤓
🎉 🎉 🎉 more css 🎉 🎉 🎉
table {
height: 1px;
}Result:
Confirmed to work on Chrome, Firefox and Safari.
Why 1px? No idea.
