Inside the first tds, there is dynamic text content that automatically expands the trs and tds. However, the second tds have a div with a background image but no text inside. I want these divs with background images to expand or collapse along with the table cells, so that the red image spans over the height of each cell. Is there a way to achieve this purely with CSS without using scripts? Check out this jsfiddle for reference.
<table border="1">
<tr>
<td>
This content makes the trs and tds to expand/contract horizontally automatically
</td>
<td>
<div class="img"></div>
</td>
</tr>
<tr>
<td>
xyz
</td>
<td>
All divs inside second tds should get expanded automatically which is not happening
</td>
</tr>
</table>
CSS
td
{
width:200px
}
.img{
width:30px;
height:40px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAXCAIAAABmo+ONAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAApSURBVDhPY3gro0IG+v///6hOvGhUJyE0qpMQGtVJCFGmE4jJAf//AwBnlUxAq2HzYQAAAABJRU5ErkJggg==) no-repeat;}