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>

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

1 个答案: