php - 使我的电子邮件表格列响应流畅的问题

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 电子邮件，它将不起作用。

事实上，要让它工作，你应该在你的 <tr> 上使用 Flexbox标签

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

注意:这可能会在复杂的表格中产生意想不到的结果

注意:正如我所说，由于电子邮件软件/应用程序的限制(没有视频、没有 JS、没有 CSS3 等)，这在 HTML 电子邮件中不起作用

@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>