This is about an email template with each table containing an item with a picture on the right side and the details on the left side with the name/brand name/ size and so on. I have tried a bunch of different solutions I have found online but I can't get the structure to be responsive enough for all platforms. Any resource regarding the structure is helpful. I made a picture to describe what the structure looks like.
Another user pointed out that I could show the last template I tried and a resource I used that didn't work out well. https://codepen.io/Georgeslatina/pen/gOGzavj
<table role="presentation" cellpadding="0" cellspacing="0" width="580" style="margin: auto;height: 220px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 20px;margin-bottom:28px !important;direction:ltr !important">
<tbody>
<tr>
<td colspan="60%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: right; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;height:20%;">
<td colspan="60%" style="">
<div style="word-wrap: break-word;padding-right:12px;font-size:18px"> text2</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 1px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="35%" style="">
<div style="font-size:20px;word-wrap: break-word;padding-right:22%"> text1</div>
</td>
</tr>
<tr>
<td colspan="44%" style="">
<div style="padding-right:10px">
<span> ₪100 </span>
<span style="padding-left:8px"> מחיר</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="24%" style="">
<div style="padding-right:20%">
<span style="padding-left:8px">L </span>
<span>מידה</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="13%" style="padding-right:8px">
<div style="border-radius:50%; width: 11px; height: 11px; border: 2px solid black; margin-left:65%">
<div style="width: 9px; height: 9px;border-radius:50%; margin:auto; margin-top:1px"></div>
</div>
</td>
<td colspan="11%">
<div style="float:left">צבע</div>
</td>
</tr>
<tr>
<td colspan="100%" style="padding-right:30px;height:30px">
<div style="text-align:right">
<span>
reason
</span>
<span style="text-align:right;font-family:NarkisBlockMF;font-size:18px;font-weight: 550;font-stretch: normal;font-style: normal;line-height: 1.28;letter-spacing: normal;color: #000;"> :סיבת החזרה</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="25%" style="position: relative">
<div style="display:block;width:135px; height:180px;text-align: center; font-size: 0; background:url('https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg') no-repeat center; background-size: cover">
</div>
<div style="
position:absolute;
z-index: 1;
bottom:0;
width: 135px;
height: 24px;
opacity: 0.8;
font-family:NarkisBlockMF;
font-size:17px;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</tbody>
</table>And the conditional VML in the example down did not work in my tests. https://stackoverflow.design/email/templates/short-transactional/
CodePudding user response：
Its so easy using php
$to = 'reciver';
$subject = 'subt';
$headers = "From: " . strip_tags($_POST['req-email']) . "\r\n";
$headers .= "Reply-To: ". strip_tags($_POST['req-email']) . "\r\n";
$headers .= "CC: [email protected]\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
$message = '<p><strong>This is strong text</strong> while this is not.</p>'; // hear will be your ful structure in html in message variable.
//Then
mail($to, $subject, $message, $headers);
Please make sure you have used this line
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
CodePudding user response：
I tried to use CSS grid for this
#parent-container {
border: 0.2rem solid black;
padding: 1em;
display: grid;
grid-template-columns: repeat(2, 1fr);
place-content: center;
}
#parent-container img {
width: 100%;
height: auto;
border-radius: 0.3rem;
}
.first-container {
height: 100%;
display: grid;
grid-auto-rows: 1fr;
}
.first-container div:nth-child(1) {
display: grid;
grid-template-columns: repeat(2, 1fr);
place-items: center;
}
.first-container div:nth-child(2) {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
}
.first-container div:nth-child(3) {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
}
.first-container div>div:not(:last-child) {
border-right: 0.2rem solid black;
}
.first-container div {
display: grid;
gap: 0.5rem;
}
.second-container {
display: grid;
place-items: center;
border: 0.2rem solid black;
padding: 0.5em;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="parent-container">
<!-- first container-child -->
<div >
<div>
<div>text1</div>
<div>text2</div>
</div>
<div>
<div>text3</div>
<div>text2</div>
<div>text1</div>
</div>
<div>
<div></div>
<div>text2</div>
<div>text1</div>
</div>
</div>
<!-- second container-child -->
<div >
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
<div>text</div>
</div>
</div>
</body>
</html>