0

I have a table where each cell has a fixed height of 88px. The text inside each cell has middle vertical alignment. I would like for a handful of cells to include an image with a height of 40px. This is easily achievable, but when I do, the text in the cell shifts to account for the height of the image. This image illustrates what's happening.

enter image description here

I get why this happens, but is there a way to include the image without the text shifting?

Things I've tried:

  • line-height: 88px; this technically works, but the text will wrap in some cases so it's not a viable solution.
  • Setting the table cell to display: table, and then wrapping the text inside with a div that has display: table-cell. That also technically works, but it feels really hacky. If it's my only option, I'll use it.
  • I know I can use position: absolute; on the image and position it with javascript if needed, but I'd prefer something that'll work if the browser is resized.

Is there another way?

Edit: It's just a super basic table, but here's the code...

<table class="table">
<tr style="height: 88px;">
<td>
    <img src="/images/trophy.png" style="float: right; height: 40px;">
    Some text
</td>
</tr>
</table>
loungehead
  • 55
  • 5
  • Please add your code. – 4LPH4 Nov 12 '20 at 20:37
  • 1
    Make the image a background image? – Dominik Nov 12 '20 at 20:41
  • I considered that @Dominik, but ideally I'll use this method to include additional images, so if I go with a background image I'd need to keep a different background image for each possible image combination that I would need, making this method less practical. I appreciate the suggestion though! – loungehead Nov 12 '20 at 20:47

0 Answers0