Проблема, из-за которой мои столбцы в электронной почте быстро реагировали

Question

У меня есть таблица с двумя столбцами, левый столбец содержит изображение, а правый - некоторый текст, я хочу, чтобы эта таблица была адаптивной, поэтому, когда на мобильных устройствах оба столбца содержат все горизонтальное пространство, а правый столбец идет ниже первого столбца,делая его несколько плавным.

Это мой шаблон:

@if(count($mailData['order']['discountcodes']) > 0)
@foreach($mailData['order']['discountcodes'] as $code)
---
<br>
# {{ $code->discount->title }} (-{{ $code->discount->discountPercent }}%)
<table style="width:100%; table-layout:fixed;" >
  <tr>
    <td class="left_column"><img src="{{ $code->discount->image }}" style="min-width:150px; max-width:150px; min-height:100px; max-height:100px; border:1px solid rgb(150,150,150);"></td>
    <td class="right_column"><p>Precio:{{ $code->discount->finalPrice }}</p><strong><p>CÓDIGO: {{ $code->unicode }}</p></strong></td>
  </tr>
</table>
<br>
---
@endforeach
@endif
# Total:{{ $mailData['order']['cartTotalPrice'] }}
<br>
<br>
Disruta Tu Compañia,
<br>
{{ env('APP_NAME') }}
@endcomponent
<style>
.left_column{text-align:left; display:inline-block; width:150px;}
.right_column{text-align:left; display:inline-block; vertical-align:top; padding:0px 0px 0px 20px;}
@media only screen and (max-width: 480px) 
{
.left_column{width:100% !important; display:block !important;}
.right_column{width:100% !important; display:block !important;}
}
</style>

Answer 1

Обычно вы не можете этого сделать.Но теперь с Flexbox вы можете!За исключением того, что я вижу твой тег «электронная почта», и если он входит в электронное письмо в формате HTML, он не будет работать.

На самом деле, чтобы это работало, ты должен использовать Flexbox на своем <tr> теге

<style>
tr {
   display: flex;
   width: 100%;
   flex-direction: column;
}
td {
   width: 100%; // Force 100% width of the table
}
</style>

NB: Это может дать неожиданный результат в сложных таблицах

NB: Как я уже сказал, это не будет работать в электронных письмах HTML из-заограничения по программному обеспечению / приложениям электронной почты (без видео, без JS, без CSS3 и т. д.)

@media(max-width: 600px) {
   tr {
     display: flex;
     width: 100%;
     flex-direction: column;
   }
   
   td {
     width: 100%;
   }
    
}

<table class="table" width="100%">
  <tbody>
    <tr>
      <th width="169">Some title here</th>
      <td width="108">0,55 %</td>
      <td width="117">0,41 %</td>
      <td width="96">0,46 %</td>
      <td width="65">0,40 %</td>
      <td width="79">0,51%</td>
    </tr>
  </tbody>
</table>