#php #css #laravel #email
#php #css #laravel #Адрес электронной почты
Вопрос:
У меня есть таблица с двумя столбцами, левый столбец содержит изображение, а правый — текст, я хочу сделать эту таблицу адаптивной, чтобы при работе на мобильных устройствах оба столбца занимали все горизонтальное пространство, а правый столбец располагался ниже первого столбца, что делало его несколько плавным.
Это мой шаблон:
@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>
Ответ №1:
Обычно вы не можете этого сделать. Но теперь с Flexbox вы можете! За исключением того, что я вижу ваш тег «email», и если это переходит в HTML-письмо, оно не будет работать.
На самом деле, чтобы это работало, вы должны использовать Flexbox в своем <tr>
теге
<style>
tr {
display: flex;
width: 100%;
flex-direction: column;
}
td {
width: 100%; // Force 100% width of the table
}
</style>
ПРИМЕЧАНИЕ: это может привести к неожиданному результату в сложных таблицах
ПРИМЕЧАНИЕ: Как я уже сказал, это не будет работать в электронных письмах 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>
Комментарии:
1. Я сказал это 2 раза в своем ответе. Он не указал, что это было только для электронных писем, просто в коде и тегах упоминается об этом, но я даже не читал код, поскольку этот вопрос не подходит: таблица всегда должна быть горизонтальной. Если нет, это не должно быть таблицей.