I need to display a table like this, but have the rows all be the same height even though the images in the table have varying sizes. The table needs to be responsive, so that everything resizes as the window size is changed.

The current code for each row is this:

<tr width="100%" height="10%" style="background-color:rgba(158,158,158,1); color: #FFFFFF">
    <td width="25%" style="margin:0; padding:4" align="left">Wed <b>Sep 29</b></td>
    <td width="100%" style="padding:4;display:flex; align-items:center; justify-content: center;" align="center">@ <img src="https://upload.wikimedia.org/wikipedia/commons/8/81/Pittsburgh_Pirates_logo_2014.svg" width="15%" style="padding:4"> Pirates</td>
    <td width="25%" style="padding:4;margin:0" align="right">6:35 PM</td>
</tr>

And the full code is here.

The problem with this is that the row sizes vary depending on the size of the logo. You can see that the logo for the Pirates is larger than the logo for the Cardinals, so the row height is taller for the Pirates.

I have succeeded in resizing the logo to be the same height as the row, based on this answer. This involved positioning the logo absolutely, though. The code for this is here (see the 7th row where I made the change). The problem with this approach is then that I can't figure out how to display the text (the @ symbol and the team name) together inline with the team logo. Obviously I can't use display inline block because I've positioned the logo absolutely. So, my question is: how can I resize the team logo to be the height of the row while also displaying the logo inline with the text (centered)?

CodePudding user response：

Scrap the abspos approach.

For the all the img logos, remove width='15%' attribute.

Add a vh height property that changes with the height of the window, e.g.

<tr>
...
<img src="pirates.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>

<tr>
...
<img src="reds.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>