How to position sibling element after position absolute?

Question

I am using a table to layout a certain html file that will be fed to email generators.

 <table> <tbody> <tr class="that-row"> <td style="font-size: 0;background: #fff; position: relative;" align="center"> <img src="img_url" style="width:100%;margin: 0 0 20px;position: absolute;top: 0;left: 0; height: 100%; min-height: 100%;"> <span style="width: 100%;line-height: 34px;font-family: Arial Regular, sans-serif;font-size: 22px;color: #474747;margin: 10px 0 0 0;"> Lorem IpsumW </span> </td> </tr> <tr class="this-row"> <td style="padding: 0 25px;font-size: 28px;line-height: 37px;color: #474747;text-align: center; position: relative;" align="center"> <span style="display: block;text-align: center;color: #474747;font-size: 34px;font-weight: bold;font-family: Arial; margin: 0 0 21px;">LOREM IPSUM</span> <span style="text-align: left;margin: 0 auto;display: block;width: 83%;">lorem ipsum 123456</span> </td> </tr> </tbody> </table> 

I want the contents of the class "this-row" to be positioned below the "that-row" class. The current situation is the contents of "this-row" is positioned above "that-row" because "that-row" has no height.

Any help is appreciated. Thanks

Answer 1

I don't recommend re-ordering table rows as it can change the default behavior of the table and there are better ways to handle what you are trying to accomplish.

Having said that, give flexbox a try. (not tested)

<table>
  <tbody style="display:flex; flex-direction:column;">
    <tr style="order:2;">
       <td>1</td>
    </tr>
    <tr style="order:1;">
       <td>2</td>
    </tr>
  </tbody>
</table>