CODEWITHSUNDEEP
htmlcsshtml-table
Zombo
Zombo

Reputation: 1

img height 100% of table row

If I have HTML like this:

<table>
   <tr>
      <td>
         <img src="a.png">
      </td>
      <td>
         <p>Sunday</p>
         <p>Sunday</p>
         <p>Sunday</p>
         <p>Sunday</p>
         <p>Sunday</p>
      </td>
   </tr>
</table>

The second column can have a variable number of paragraphs, so the height will be different. Whatever height the row is, I want the image to be that height. I tried this:

img {
   height: 100%;
}

but it didn't seem to do anything. I would like to avoid changing the HTML if possible, can I do this with only CSS?

Upvotes: 3

Views: 112

Answers (1)

Zombo
Zombo

Reputation: 1

So the reason I wanted to increase the height of the image, was because the second column can be much larger, which pushes the image way down with the default table vertical centering. Instead of focusing on the image size, I instead just moved the image to the top:

td {
   vertical-align: top;
}

If someone has a solution to the original question I am still interested, but this should do as a workaround.

Upvotes: 1

Related Questions