时间戳

首页 > 解决方案 > 使我的电子邮件表格列响应流畅的问题

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

问题描述

我有一个有两列的表，左列包含图像，右列包含一些文本，我想让这个表响应，所以当在移动设备上时，两列都包含所有水平空间，右列低于第一列，使它有点体液。

这是我的模板：

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

标签： phpcsslaravelemail

解决方案

通常你不能真正做到这一点。但是现在有了 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>

推荐阅读