i have a php file to generate otp and sending html mail to user but i am unable to insert php variable it beacuse i am getting html mail content from other file please help me to do it
i want to insert below variable in html
$otpemail
$name
here is my php code
if (isset($_POST['resend'])) {
$uid = $_SESSION['usr_id'];
$otpemail=mt_rand(100000,999999);
$subject = "Email verification";
$email_from= "Go Alert <verification#goalert.in>";
$email_reply = "feedback#goalert.in";
$headers = 'From: '.$email_from."\r\n". 'Reply-To: '.$email_reply."\r\n" .'X-Mailer: PHP/' . phpversion();
$headers .= 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$user =$db->getemail($uid);
if($user != NULL){
$email = $user['email'];
$name = $user['name'];
$status = "Not Verified";
$messageemail = file_get_contents('email.html');
$user=$db->resendemailotp($uid,$name,$email,$otpemail,$status);
#mail($email, $subject, $messageemail, $headers);
$errormsg1 = "Email Sent Please Check Spam if not recived";
}else {
$errormsg1 = "Error in Sending Email";
}
}
my html mail file codes are
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" style="background: #f0f0f0; min-height: 100%;" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width" name="viewport" />
</head>
<body style="box-sizing: border-box; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important;">
<table class="body" style="background: #f0f0f0; border-collapse: collapse; border-spacing: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; height: 100%; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<td align="center" class="center" style="border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;" valign="top">
<center data-parsed="" style="min-width: 580px; width: 100%;">
<table class="container text-center" style="background: #fefefe; border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 580px;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<td style="border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
<!-- This container adds the gap at the top of the email -->
<table class="row grey" style="background: #f0f0f0; border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th class="small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 564px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;"> </th>
<th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;">
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="container text-center" style="background: #fefefe; border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 580px;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<td style="border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
<!-- Main email content -->
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<!-- Logo -->
<th class="small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 564px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
<center data-parsed="" style="min-width: 532px; width: 100%;"><a align="center" class="text-center" href="http://www.goalert.in" style="color: #f7931d; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> <img alt="Logo Image" class="swu-logo" src="https://www.goalert.in/test/assets/images/logo.png" style="border: none; clear: both; display: block; height: auto; max-width: 100%; outline: none; padding: 15px 0px 0px 0px; text-decoration: none; width: 170px;" /> </a></center>
</th>
<th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;">
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row masthead" style="background: #212121; border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<!-- Masthead -->
<th class="small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 564px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
<h1 class="text-center" style="color: #f7931d; font-family: Helvetica, Arial, sans-serif; font-size: 34px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 35px 0px 15px 0px; text-align: center; word-wrap: normal;">Download our Application</h1>
<center data-parsed="" style="min-width: 532px; width: 100%;"><a align="center" class="text-center" href="https://play.google.com/store/apps/details?id=in.com.goalert" style="color: #f7931d; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;"> <img align="center" alt="Masthead Image" class="text-center" src="https://www.goalert.in/test/assets/images/play.png" style="border: none; clear: both; display: block; float: none; margin: 0 auto; max-width: 100%; outline: none; text-align: center; text-decoration: none; width: auto;" valign="bottom" /> </a></center>
</th>
<th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;">
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th class="small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 564px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;"> <!--This container adds the gap between masthead and digest content -->
</th>
<th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;">
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<!-- Email copy -->
<th class="small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 564px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
<h5 style="color: inherit; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;">Hi, {{name}}</h5>
<p style="color: #777777 !important; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">Thankyou for suscribing with Go Alert.Now receive all application notifiaction into your mailbox.For faster information download our official mobile application from here</p>
<br />
<hr style="border-bottom: 1px solid #cacaca; border-left: 0; border-right: 0; border-top: 0; clear: both; height: 0; margin: 20px auto; max-width: 580px;" />
</th>
<th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;">
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th class="small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 564px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
<h5 class="text-center" style="color: inherit; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: center; word-wrap: normal;">Your OTP is</h5>
</th>
<th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;">
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<!-- Coupon code box -->
<th class="small-12 large-4 columns first" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 8px; text-align: left; width: 177.33333px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
</th>
</tr>
</table>
</th>
<th class="grey small-12 large-12 columns" style="background: #f0f0f0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 8px; padding-right: 8px; text-align: left; width: 564px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
<br />
<h5 class="text-center" style="color: inherit; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: center; word-wrap: normal;" valign="middle">2ob3-32cc39-2pe3-291ab</h5>
</th>
<th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;">
</th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 8px; padding-right: 16px; text-align: left; width: 177.33333px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<!-- Call to Action -->
<th class="small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 564px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
<center data-parsed="" style="min-width: 532px; width: 100%;">
<br align="center" class="text-center" />
<br align="center" class="text-center" />
<table class="button text-center" style="border-collapse: collapse; border-spacing: 0; margin: 0 0 16px 0; padding: 0; text-align: center; vertical-align: top; width: auto !important;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<td style="border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<td style="background: #f7931d; border: 2px solid #f7931d; border-collapse: collapse !important; color: #fefefe; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; width: auto !important; word-wrap: break-word;">Download Our Application </td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</th>
<th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;">
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<!--This row adds the gap between masthead and digest content -->
<th class="small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 564px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;"> </th>
<th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;">
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- / End main email content -->
<table class="container text-center" style="background: #fefefe; border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 580px;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<td style="border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
<table class="row grey" style="background: #f0f0f0; border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
<tbody>
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th class="small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; text-align: left; width: 564px;">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
<tr style="padding: 0; text-align: left; vertical-align: top;">
<th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
<p class="text-center footercopy" style="color: #777777 !important; font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 19px; margin: 0; margin-bottom: 10px; padding: 20px 0px; text-align: center;">© Copyright 2016 Go Alert. All Rights Reserved.</p>
</th>
<th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;">
</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
Quick/dirty, use the output buffering system:
foo.html
<div><?php echo $var ?></div>
main script:
ob_start();
$var = 'hi mom!';
include('foo.html'); // executes any php code in the file
$html = ob_end_clean();
Alternatively, you could use a simple templating system:
foo.html:
<div>%VAR%</div>
main script:
$raw_html = file_get_contents('foo.html');
$var = 'hi mom!';
$complete_html = str_replace('%VAR%', $var, $raw_html);
Related
Here is the problem -> Problem
I'm trying to put that piece of text under the table but it is overlapping on the table.
And i cannot get it to the bottom. I think its because on condition it is making the <tr> and because of that the text part gets rendered before the loop has been finished.
And here is my code ->
<!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>Student Records</title>
</head>
<body>
<style>
.pdfContainer {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
table {
width: 100%;
text-align: center;
margin-right: auto;
margin-left: auto;
float: bottom;
border: none;
}
td {
text-align: center;
font-size: 0.95em;
color: #252a34;
font-weight: 500;
background-color: #fff;
white-space: nowrap;
}
th,
td {
padding: 15px;
border: 1px solid #252a34 !important;
border-collapse: collapse;
border-spacing: 0;
}
th {
text-align: center;
font-size: 0.95em;
font-weight: 800;
border: none;
white-space: nowrap;
}
.attdStatusTdpresent {
color: #18a14f;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-weight: 600;
font-size: 0.95em;
font-family: "Merriweather Sans", sans-serif;
}
.attdStatusTdabsent {
color: #b82348;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-weight: 600;
font-size: 0.95em;
font-family: "Merriweather Sans", sans-serif;
}
.attdStatusTdlate {
color: #ff2e63;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourExcellent {
color: #289672;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourGood {
color: #00bfa6;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourAverage {
color: #ffc947;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attBehaviourBad {
color: #ff2e63;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attProgressExcellent {
color: #289672;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attProgressGood {
color: #00bfa6;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.attProgressNeed {
color: #ffc947;
padding: 8px;
width: 140px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
white-space: nowrap;
}
.attProgressprogressive {
color: #185adb;
padding: 8px;
width: 110px;
border-radius: 40px;
margin: auto;
text-transform: capitalize;
font-size: 0.95em;
}
.pdfContainer {
width: 100%;
display: flex;
align-items: flex-start;
box-sizing: border-box;
}
.logo>img {
width: 100%;
min-height: 30px;
}
.nameContainer {
width: 100%;
text-align: center;
}
</style>
<div class="logo">
<img src="<?php echo Illuminate\Support\Facades\URL::to('/') . '/' ?>images/l.jpg" alt="">
</div>
<div class="nameContainer">
<h2> {{$studentName}} </h2>
</div>
<div class="pdfContainer">
<table>
<tr>
<th> PRÉSENCE </th>
<th> COMPORTEMENT </th>
<th> PROGRES </th>
<th> DATE DE L’ATELIER </th>
</tr>
#foreach($records as $record)
<tr>
<td>
data
</td>
<td>
data
</td>
<td>
data
</td>
<td>
<p> {{$record['customDate']}} </p>
</td>
</tr>
#endforeach
</table>
</div>
<div class="termContainer">
<strong> Term Report: </strong>
<p>{{ !empty($termReport->text) ? $termReport->text: '' }} </p>
</div>
<div class="footerImage">
<img src="<?php echo Illuminate\Support\Facades\URL::to('/') . '/' ?>images/fol.jpg" alt="">
</div>
</body>
</html>
Any solution?
style='margin:auto; Do not use this CSS property. You give the margin size in px, rem etc. If you give percentage (%) EX: 50%, 25%, auto in dompdf it will not be captured
dompdf is mostly CSS 2.1 compliant, which means things like flexbox are not supported.
enter link description here
Problem
I am constructing an HTML email to send which includes products in our database.
I have all the moving parts, I believe, to complete the task but just not sure how to piece it together.
The HTML template
$template = file_get_contents("notify.html");
Template Tags
{{TITLE}}
{{PRICE}}
{{LOCATION}}
{{MILES}}
The element I want to loop
NOTE: This first element is inside the template. I can remove it if we need to, though.
$div = <<<EOF
<!-- START LOOP HERE -->
<div style="background-color:transparent;">
<div class="block-grid four-up no-stack" style="Margin: 0 auto; min-width: 320px; max-width: 650px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #FFFFFF;">
<div style="border-collapse: collapse;display: table;width: 100%;background-color:#FFFFFF;">
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:650px"><tr class="layout-full-width" style="background-color:#FFFFFF"><![endif]-->
<!--[if (mso)|(IE)]><td align="center" width="162" style="background-color:#FFFFFF;width:162px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->
<div class="col num3" style="max-width: 320px; min-width: 162px; display: table-cell; vertical-align: top; width: 162px;">
<div style="width:100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
<!--<![endif]-->
<div align="center" class="img-container center fixedwidth" style="padding-right: 0px;padding-left: 0px;">
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px"><td style="padding-right: 0px;padding-left: 0px;" align="center"><![endif]--><img align="center" alt="Image" border="0" class="center fixedwidth" src="images/2.png" style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: auto; width: 100%; max-width: 130px; display: block;" title="Image" width="130"/>
<!--[if mso]></td></tr></table><![endif]-->
</div>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
<!--[if (mso)|(IE)]></td><td align="center" width="162" style="background-color:#FFFFFF;width:162px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 1px dotted #E8E8E8;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:30px; padding-bottom:35px;"><![endif]-->
<div class="col num3" style="max-width: 320px; min-width: 162px; display: table-cell; vertical-align: top; width: 161px;">
<div style="width:100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:1px dotted #E8E8E8; padding-top:30px; padding-bottom:35px; padding-right: 0px; padding-left: 0px;">
<!--<![endif]-->
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 0px; padding-top: 10px; padding-bottom: 5px; font-family: Tahoma, Verdana, sans-serif"><![endif]-->
<div style="color:#555555;font-family:Lato, Tahoma, Verdana, Segoe, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:5px;padding-left:0px;">
<div style="font-size: 12px; line-height: 1.2; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; color: #555555; mso-line-height-alt: 14px;">
<p style="font-size: 16px; line-height: 1.2; text-align: left; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; word-break: break-word; mso-line-height-alt: 19px; margin: 0;"><span style="font-size: 16px; color: #2190e3;"><strong>{{TITLE}}</strong></span></p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]-->
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 0px; padding-top: 0px; padding-bottom: 10px; font-family: Tahoma, Verdana, sans-serif"><![endif]-->
<div style="color:#555555;font-family:Lato, Tahoma, Verdana, Segoe, sans-serif;line-height:1.2;padding-top:0px;padding-right:10px;padding-bottom:10px;padding-left:0px;">
<div style="font-size: 12px; line-height: 1.2; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; color: #555555; mso-line-height-alt: 14px;">
<p style="font-size: 14px; line-height: 1.2; text-align: left; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; word-break: break-word; mso-line-height-alt: 17px; margin: 0;">{{MILES}}</p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]-->
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
<!--[if (mso)|(IE)]></td><td align="center" width="162" style="background-color:#FFFFFF;width:162px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 1px dotted #E8E8E8;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:55px; padding-bottom:5px;"><![endif]-->
<div class="col num3" style="max-width: 320px; min-width: 162px; display: table-cell; vertical-align: top; width: 161px;">
<div style="width:100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:1px dotted #E8E8E8; padding-top:55px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
<!--<![endif]-->
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 10px; font-family: Tahoma, Verdana, sans-serif"><![endif]-->
<div style="color:#555555;font-family:Lato, Tahoma, Verdana, Segoe, sans-serif;line-height:1.2;padding-top:0px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
<div style="font-size: 12px; line-height: 1.2; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; color: #555555; mso-line-height-alt: 14px;">
<p style="font-size: 20px; line-height: 1.2; text-align: center; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; word-break: break-word; mso-line-height-alt: 24px; margin: 0;"><span style="font-size: 20px;"><strong>{{LOCATION}}</strong></span></p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" class="divider" role="presentation" style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; min-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" valign="top" width="100%">
<tbody>
<tr style="vertical-align: top;" valign="top">
<td class="divider_inner" style="word-break: break-word; vertical-align: top; min-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;" valign="top"><table align="center" border="0" cellpadding="0" cellspacing="0" class="divider_content" height="30" role="presentation" style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-top: 0px solid transparent; height: 30px; width: 100%;" valign="top" width="100%">
<tbody>
<tr style="vertical-align: top;" valign="top">
<td height="30" style="word-break: break-word; vertical-align: top; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" valign="top"><span></span></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
<!--[if (mso)|(IE)]></td><td align="center" width="162" style="background-color:#FFFFFF;width:162px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:55px; padding-bottom:5px;"><![endif]-->
<div class="col num3" style="max-width: 320px; min-width: 162px; display: table-cell; vertical-align: top; width: 162px;">
<div style="width:100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:55px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
<!--<![endif]-->
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 15px; padding-left: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Tahoma, Verdana, sans-serif"><![endif]-->
<div style="color:#555555;font-family:Lato, Tahoma, Verdana, Segoe, sans-serif;line-height:1.2;padding-top:0px;padding-right:15px;padding-bottom:0px;padding-left:0px;">
<div style="line-height: 1.2; font-size: 12px; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; color: #555555; mso-line-height-alt: 14px;">
<p style="line-height: 1.2; text-align: center; font-size: 20px; font-family: Lato, Tahoma, Verdana, Segoe, sans-serif; word-break: break-word; mso-line-height-alt: 24px; margin: 0;"><span style="font-size: 20px;"><span style="font-size: 20px;"><strong>{{PRICE}}</strong></span></span></p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]-->
<!--[if (!mso)&(!IE)]><!-->
</div>
<!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
EOF;
A Simple template system
But I believe this will work on only one row (right?)
foreach($variables as $key => $value)
{
$template = str_replace('{{ '.$key.' }}', $value, $template);
}
MySQL Results
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * from";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
// $row['title']
// $row['price']
// $row['location']
// $row['miles']
}
} else {
echo "0 results";
}
So...
Given all that, how would I construct the HTML to loop over the results and include that DIV as many times as there are results?
Thank you for looking.
Ps. I did research this topic on SO , and found similar questions but none quite matched my criteria. Thanks again!
I believe something like that would work:
<?php
$template = file_get_contents("notify.html");
$html = "";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn)
{
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * from PRODUCT";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0)
{
// Add template into HTML with replaced variable for each row
while($row = mysqli_fetch_assoc($result))
{
$tmp_template = $template;
foreach($row as $key => $value)
{
$tmp_template = str_replace('{{ '.$key.' }}', $value, $template);
}
$html .= $tmp_template;
}
echo $html;
}
else
{
echo "0 results";
}
The only thing I added is the tmp_template variable. This variable is a copy of the original template where you will replace the variable from your query into it. After replacing all the variable with their value, you will at this tmp_template variable into a html variable. This html variable will be your final result that you will send by email. You could add a header before the loop and a footer after the loop into your html variable for the email.
PLEASE NOTE: I did not test this code, but it should be very close to what you need.
I searched for this everywhere, but I couldn't find it. I want to echo some variables. My message:
$mailMsg ='<table class="head-wrap" bgcolor="#999999" width: 100%; margin: 0; padding: 0;">
<tr margin: 0; padding: 0;">
<td margin: 0; padding: 0;"></td>
<td class="header container" align="" display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto; padding: 0;">
</td>
<td margin: 0; padding: 0;"></td>
</tr>
</table>
<table class="body-wrap" bgcolor="" width: 100%; margin: 0; padding: 0;">
<tr margin: 0; padding: 0;">
<td margin: 0; padding: 0;"></td>
<td class="container" align="" bgcolor="#FFFFFF" display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto; padding: 0;">
<div class="content" max-width: 600px; display: block; margin: 0 auto; padding: 15px;">
<table width: 100%; margin: 0; padding: 0;">
<tr margin: 0; padding: 0;">
<td margin: 0; padding: 0;">
<h1 line-height: 1.1; color: #000; font-weight: 200; font-size: 44px; margin: 0 0 15px; padding: 0;">New purchase at Cali client!</h1>
<p font-weight: normal; font-size: 14px; line-height: 1.6; margin: 0 0 10px; padding: 0;">Email: </p>
'
+ echo $useremail +
'
<br margin: 0; padding: 0;" />
<p font-weight: normal; font-size: 14px; line-height: 1.6; margin: 0 0 10px; padding: 0;">Discord: </p>
'+ echo $userdiscord +'
<br margin: 0; padding: 0;" />
<p font-weight: normal; font-size: 14px; line-height: 1.6; margin: 0 0 10px; padding: 0;">Ip: </p>
'
+ echo $ip;
Do not use + to connect strings in PHP. Use . instead.
And there is no need to echo the variable.
So instead of
' + echo $useremail + '
do
' . $useremail . '
then the common way of sending mail in PHP: How to send an email using PHP?
You may also use placeholders in your HTML template and replace them with your vars then.
For example:
$mail_template = '<table><tr><td>##USERNAME##</td></tr></table>';
$mail_final = str_replace('##USERNAME##', $username, $mail_template);
// ...
mail($to, $subject, $mail_final, $headers);
I'm customising the Woocommerce email templates at the moment, and very weirdly the table border in those templates looks different on different devices.
The first photo is a capture from the mail seen on Macbook Mail app and the border appears in the way as it's supposed to.
This one is a screenshot from from the iPhone Gmail app; the border is extremely distorted.
I couldn't attach one I took from the native iPhone Mail app but the border appears on only certain parts of the table.
Below is the code for the table.
<table class="td" cellspacing="0" cellpadding="6" style="width: 100%; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: auto; margin: 0 auto !important; color: #333333; border: 0.5px solid #e5e5e5;" lucida sans unicode grande sans-serif border="1">
<thead><tr>
<th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Product</th>
<th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Quantity</th>
<th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Price</th>
</tr></thead>
<tbody style="font-size: 11px;"><tr class="order_item">
<td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif word-wrap:break-word>CLLR Issue
1<br><small></small>
</td>
<td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif>1</td>
<td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif><span class="woocommerce-Price-amount
amount"><span class="woocommerce-Price-currencySymbol">£</span>12.00</span></td>
</tr></tbody>
<tfoot>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; border-top-width: 4px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Subtotal:</th>
<td class="td" style="text-align: left; font-size: 11px; border-top-width: 4px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;"><span class="woocommerce-Price-amount
amount"><span class="woocommerce-Price-currencySymbol">£</span>12.00</span></td>
</tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Shipping:</th>
<td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>3.90</span> <small class="shipped_via">via Royal Mail 1st Class Signed for</small>
</td>
</tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Payment Method:</th>
<td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Stripe</td>
</tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;">Total:</th>
<td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 0.5px solid #e5e5e5; padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>15.90</span></td>
</tr>
</tfoot>
</table>
And here is the CSS in the head.
<style type="text/css">#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
.email-container {
min-width: 375px !important;
}
}#media only screen and (max-width: 480px){
#body_content_inner,
h2,
h3,
td {
font-size: 14px !important;
}
}#media only screen and (min-device-width: 375px) and
(max-device-width: 413px) {
.email-container {
min-width: 375px !important;
}
}#media only screen and (max-width: 480px){
#body_content_inner,
h2,
h3,
td {
font-size: 14px !important;
}
}
What could possibly be the reason for this behaviour?
-updated:
Below is the revised code based on #Benr89 's comment. On everywhere else, the table looks fine, but on Gmail iPhone app two lines appear between in the middle of the second row [photo] (cllrart.com/wp-content/uploads/2017/03/IMG_4425.png)
<table class="td" cellspacing="0" cellpadding="6" style="width: 100%; font-family: 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande',
sans-serif; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border: 1px solid #eee; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: auto; margin: 0 auto !important; color: #333333;" border="10">
<thead><tr>
<th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Product</th>
<th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Quantity</th>
<th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Price</th>
</tr></thead>
<tbody style="font-size: 11px;"><tr class="order_item">
<td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif word-wrap:break-word>CLLR Issue
1<br><small></small>
</td>
<td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif>2</td>
<td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family: ; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif><span class="woocommerce-Price-amount
amount"><span class="woocommerce-Price-currencySymbol">£</span>24.00</span></td>
</tr></tbody>
<tfoot>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; border-top-width: 4px; color: #333333; border: 1px solid #eee; padding: 12px;">Subtotal:</th>
<td class="td" style="text-align: left; font-size: 11px; border-top-width: 4px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;"><span class="woocommerce-Price-amount
amount"><span class="woocommerce-Price-currencySymbol">£</span>24.00</span></td>
</tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Shipping:</th>
<td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>3.90</span> <small class="shipped_via">via Royal Mail 1st Class Signed for</small>
</td>
</tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Payment Method:</th>
<td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;">Stripe</td>
</tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Total:</th>
<td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>27.90</span></td>
</tr>
</tfoot>
</table>
First of all, set border="0" in your opening table.
Your main problem is that you are using 0.5px as a border size on some of your table cells. Change these to 1px and your borders are fine.
I have added your new code below, I have tested in Litmus and all works fine :)
EDIT - NEW CODE ADDED BELOW-------------------------------------------------
Ok for some reason you had border="10" in your opening table, this is not valid so I have changed to 0. you had variious errors in your css. eg, empty font-family tags (you had left the value outside off the "").
I have also removed the Table head and table footer sections as they are not needed in emails at all.
Stick to using table, tr and td.(you may want to go trhough and remove your th tags aswell as they are not needed and just use td instead.)
Anyway, this should fix your email - I havent been able to test it on the gmail Iphone app as Litmus dont provide support for it. And I dont have an Iphone im an android user.
<table class="td" cellspacing="0" cellpadding="6" style="width: 100%; font-family: 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande',
sans-serif; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border: 1px solid #eee; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: auto; margin: 0 auto !important; color: #333333;" border="1">
<tbody style="font-size: 11px;">
<tr>
<th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Product</th>
<th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Quantity</th>
<th class="td" scope="col" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Price</th>
</tr>
<tr class="order_item">
<td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family:lucida sans unicode grande sans-serif ; mso-table-rspace: 0pt !important; color: #333333; padding: 12px; word-wrap:break-word">
CLLR Issue
1<br><small></small>
</td>
<td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family:'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande' ; mso-table-rspace: 0pt !important; color: #333333; padding: 12px;" lucida sans unicode grande sans-serif>2</td>
<td class="td" style="text-align: left; vertical-align: middle; border: 1px solid #eee; font-family:'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande' ; mso-table-lspace: 0pt !important; color: #333333; padding: 12px;">
<span class="woocommerce-Price-amount
amount"><span class="woocommerce-Price-currencySymbol">£</span>24.00</span>
</td>
</tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; border-top-width: 4px; color: #333333; border: 1px solid #eee; padding: 12px;">Subtotal:</th>
<td class="td" style="text-align: left; font-size: 11px; border-top-width: 4px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;">
<span class="woocommerce-Price-amount
amount"><span class="woocommerce-Price-currencySymbol">£</span>24.00</span>
</td>
</tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Shipping:</th>
<td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>3.90</span> <small class="shipped_via">via Royal Mail 1st Class Signed for</small>
</td>
</tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Payment Method:</th>
<td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;">Stripe</td>
</tr>
<tr>
<th class="td" scope="row" colspan="2" style="text-align: left; font-size: 11px; color: #333333; border: 1px solid #eee; padding: 12px;">Total:</th>
<td class="td" style="text-align: left; font-size: 11px; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; color: #333333; border: 1px solid #eee; padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>27.90</span></td>
</tr>
</tbody>
</table>
I wrote a PHP code to generate a table dynamically. The head of the table can be any text value in a database and the column of the table can be any text in the database.
If the value of the columns are the same or similar, then the width should be somewhat the same.
the following is my HTML code that is generated by PHP
<div style="margin: 0 auto; text-align: center;">
<table class="common2">
<thead>
<tr>
<th colspan="12">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left; width: 150px;">Answer Options</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">2</td>
<td style="text-align: center;">3</td>
<td style="text-align: center;">4</td>
<td style="text-align: center;">5</td>
<td style="text-align: center;">6</td>
<td style="text-align: center;">7</td>
<td style="text-align: center;">8</td>
<td style="text-align: center;">9</td>
<td style="text-align: center;">10</td>
<td style="text-align: center;">11+</td>
</tr>
<tr>
<td style="text-align: left; width: 150px;">Response Count</td>
<td style="text-align: center;">2</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">1</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">1</td>
</tr>
</tbody>
</table>
</div>
this is my common2 css code
.common2
{
width: 100%;
border: solid #E6E6E6 1px;
margin: 0 auto;
padding: 0;
border-spacing: 0px;
/* border-collapse: collapse; */
}
.common2 td
{
padding: 6px;
border: solid #E6E6E6 1px;
}
.common2 th
{
color: #fff;
font-weight: bold;
text-align: center;
border: solid #E6E6E6 1px;
background-color: #1A1A1C;
padding: 8px;
font-size: 14.5px;
}
.common2 th.highlighed
{
color: #fff;
font-weight: bold;
text-align: center;
border: 0px solid #DBDBDB;
background-color: #666666;
padding: 6px 10px;
}
.common2 tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}
.common tr:last-child td:last-child {
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.common2 tr:nth-child(even)
{
background-color: #E8E8E8; /*#E7E9E8; /*#D6D8D7;*/
position: relative;
}
.common2 td.stickOut
{
background-color: #DDEAFA; /*#DBAFAF;*/
position: relative;
font-weight: bold;
border: solid #DBDBDB 1px;
}
.common2 td.head
{
background-color: #25328C; /* #4F4F4F; */
text-align: center;
border: 1px solid #25328C;
padding: 3px;
font-weight: bold;
color: #fff;
padding: 4px 10px;
height: 35px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2C3C92), color-stop(1, #25328C));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #2C3C92 0%, #25328C 100%);
}
.common2 td.subfoot
{
background-color: #FFFF99; /* #4F4F4F; */
text-align: center;
border: 1px solid #DBDBDB;
padding: 3px;
color: #000;
font-weight: 600;
font-style:italic;
padding: 4px 10px;
}
.common2 td.foot1
{
background-color: #999999; /* #4F4F4F; */
text-align: center;
border: 1px solid #DBDBDB;
padding: 3px;
font-weight: bold;
color: #fff;
padding: 4px 10px;
}
.common2 td.foot2
{
background-color: #555555; /* #4F4F4F; */
text-align: center;
border: 1px solid #DBDBDB;
padding: 3px;
font-weight: bold;
color: #fff;
padding: 4px 10px;
}
Here is a screenshot of my current output.
How can I make those columns with a similar width, excluding the very first column, as I specified how wide that will be?
remove width property from .common2
http://jsfiddle.net/raam86/knj9E/