Attempting to make a child element of a table cell inherit the height and width of the table cell through CSS. Below is the HTML provided:
<tr>
<td>
<div class="yellowDiv"></div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
CSS being used is shown below:
table tbody tr td:nth-child(1){
position: relative;
}
table tbody tr td div.yellowDiv{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background: yellow;
}
This code displays correctly on Chrome, however, it does not render properly on IE (specifically IE 9 and 10). Attempts have been made to set display: table-cell; for the div element without success. Setting the height of the div element to be 100% has also proved ineffective.