I have a table that is populated with php via a text file. I know how to create a new table for each new data entry but I am trying to just create a new row instead of a whole new table. How can I create a new row with data instead of an entire table?
This is currently what I have now and I just want to create a new row with the variables in it. How can I achive this without it creating a whole new table each time. I have tried a couple of things with no success.
$tracreport = $tracreport . "<table width='100%' cellpadding='0' cellspacing='0' style='margin-top:15px; background-color:#000; color:#FFF;'>
<tr>
<td style='padding: 3px 0px 3px 0px; font-size: .9em; text-align: center; color: #00FF00;'> Tracking " . $tnumber[1] . " active storm cell</td>
</tr>
<tr>
<td>
<table width='100%' cellpadding='0' cellspacing='0'>
<tr>
<td>
<table id='tracReport' width='100%' cellpadding='0' cellspacing='0'>
<tr>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Cell ID</td>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Tracking Since</td>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Bearing</td>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Distance</td>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Intensity</td>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Trend</td>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Last Strike</td
</tr>
<tr>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . $tid[$k] . "</td>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . $tdtime[$k] . "</td>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . $tdirection[$k] . " °</td>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . $tdistance[$k] . " miles</td>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . strtolower($tintensity[$k]) . "</td>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . trim(strtolower($ttrend[$k])) . "</td>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . trim(strtolower($tactivity[$k])) . "</td>
</tr>
</table>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>";
You could try splitting your table, and add your loop in the middle
// begin your table
$tracreport = $tracreport . "<table width='100%' cellpadding='0' cellspacing='0' style='margin-top:15px; background-color:#000; color:#FFF;'>
<tr>
<td style='padding: 3px 0px 3px 0px; font-size: .9em; text-align: center; color: #00FF00;'> Tracking " . $tnumber[1] . " active storm cell</td>
</tr>
<tr>
<td>
<table width='100%' cellpadding='0' cellspacing='0'>
<tr>
<td>
<table id='tracReport' width='100%' cellpadding='0' cellspacing='0'>
<tr>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Cell ID</td>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Tracking Since</td>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Bearing</td>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Distance</td>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Intensity</td>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Trend</td>
<td style='background-color:#333; color:#3299cc; font-weight: normal; border: 1px #666 solid; text-align: center; font-size: .9em;'>Last Strike</td
</tr>"; // break the top part of the table
// create your loop
for($k=0;$k<YOUR MAX ROWS;$k++){
$tracreport .="<tr>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . $tid[$k] . "</td>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . $tdtime[$k] . "</td>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . $tdirection[$k] . " °</td>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . $tdistance[$k] . " miles</td>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . strtolower($tintensity[$k]) . "</td>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . trim(strtolower($ttrend[$k])) . "</td>
<td style='background-color: black; color: #FFF; border: 1px #666 solid; text-align: center; font-size: .9em;'>" . trim(strtolower($tactivity[$k])) . "</td>
</tr>";
} // close your loop
// finish your table
$tracreport .= "</table>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>";
edit
instead of for($k=0;$k<YOUR MAX ROWS;$k++){...}, if you don't know the total max, use a foreach loop
foreach($tid as $k => $v){
...
}
this will then loop through each of the values without needing to know the max count
Use this method to generate table rows:
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<?php
$yourquery = mysql_query("");
while ($rows = mysql_fetch_assoc($yourquery)) {
?>
<tr>
<td><?php $rows['name']; ?></td>
<td><?php $rows['age']; ?></td>
</tr>
<?php } ?>
</table>
Related
I want PDF separate html(invoice.html) page using DomPDF library,
but when I generating html file to PDF its throwing error like: it would throwing error regarding style sheet.
'DOMXPath::query(): Invalid expression' (length=37)
D:\wamp\www\crm\include\dompdf\src\Css\Stylesheet.php:882:string
html file:-
1)invoice.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Invoice</title>
</head>
<body style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;">
<div style="width: 680px;">
<table style="border-collapse: collapse; width: 100%; border-top: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; margin-bottom: 20px;">
<tr>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; background-color: #EFEFEF; font-weight: bold; text-align: left; padding: 7px; color: #222222;" colspan="2">Order Details</td>
</tr>
<tr>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; text-align: left; padding: 7px;">
<b>Invoice Id</b> {{invoice_id}}<br />
<b>Date</b> {{date}}<br />
<b>Payment</b> {{payment_method}}<br />
</td>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; text-align: left; padding: 7px;">
<b>Address</b> {{store_address}}<br />
<b>Telephone</b> {{store_telephone}}<br />
<b>GSTIN</b> {{store_gstin}}<br />
</td>
</tr>
</table>
<table style="border-collapse: collapse; width: 100%; border-top: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; margin-bottom: 20px;">
<tr>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; background-color: #EFEFEF; font-weight: bold; text-align: left; padding: 7px; color: #222222;" colspan="3">Customer Details</td>
</tr>
<tr>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; text-align: left; padding: 7px;">
<b>GSTIN</b> {{customer_gstin}}<br />
<b>Telephone</b> {{customer_number}}<br />
<b>Address</b> {{customer_address}}<br />
</td>
</tr>
</table>
<table style="border-collapse: collapse; width: 100%; border-top: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; margin-bottom: 20px;">
<thead>
<tr>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; background-color: #EFEFEF; font-weight: bold; text-align: left; padding: 7px; color: #222222;">Product</td>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; background-color: #EFEFEF; font-weight: bold; text-align: right; padding: 7px; color: #222222;">Quantity</td>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; background-color: #EFEFEF; font-weight: bold; text-align: right; padding: 7px; color: #222222;">Price</td>
<td style="font-size: 12px; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; background-color: #EFEFEF; font-weight: bold; text-align: right; padding: 7px; color: #222222;">Total</td>
</tr>
</thead>
<tbody>
{{products}}
</tbody>
<tfoot>
{{totals}}
</tfoot>
</table>
</div>
</body>
</html>
controller:-
2)sales.php(codeigniter controller)
$dompdf = new dompdf();
$sourcefile = file_get_contents(webpath.'include/invoice.html');
$original = array("{{invoice_id}}","{{date}}","{{payment_method}}","{{store_address}}","{{store_telephone}}","{{store_gstin}}","{{customer_gstin}}","{{customer_number}}","{{customer_address}}","{{products}}","{{totals}}");
$replace = array($invoice_id,$date,ucfirst($datas['payConition']),$storedata['store_address'],$storedata['store_telephone'],$storedata['store_gstIn'],$users['party_gstin'],$users['party_number'],$users['party_address'],$producttext,$totaltext);
$printfile = str_replace($original, $replace, $sourcefile);
$dompdf->loadHtml($printfile);
$dompdf->setPaper('A4', 'landscape');
$dompdf->render();
//$d
hi I am using dompdf for generating pdf from HTML but not able to understand why it gets break while printing the pdf
here is my function
public function printRunsheetBymanifestAction()
{
$manifestId = $this->params()->fromRoute('id', 0);
$getDetails = $this->getDeliveryTable()->getRunSheetData(array('manifestId' => base64_decode($manifestId)));
$getItemDetails = $this->getManifestTable()->getManifestItemsById($getDetails[0]['manifestId']);
$options = new Options();
$options->set('isRemoteEnabled', true);
$options->set('defaultFont','Courier');
$options->set('defaultPaperSize','A4');
$domPdf = new \Dompdf\Dompdf($options);
$domPdf->set_option('isHtml5ParserEnabled', true);
$view = $this->getServiceLocator()->get('ViewRenderer');
$viewModel = new ViewModel();
$viewModel->setTemplate('delivery/index/print-runsheet-bymanifest.phtml');
$viewModel->setVariable('results', $getDetails);
$viewModel->setVariable('itemDetails', $getItemDetails);
$content = $view->render($viewModel); //make html content for loadn in doampdf
$domPdf->loadHtml($content);
$domPdf->render();
$fileName = $getDetails[0]['runsheetNumber'].'_'.date('d_m_Y');
$domPdf->stream($fileName,array("Attachment"=>1));
exit;
}
here is my phtml template even I try the page break CSS for break the page after desired output
<?php $results = $this->results;
$items = $this->itemDetails;
?>
<style>
table.body {
width: 100%;
margin: 0 auto;
}
td.text-right{text-align: right;}
td.text-center{text-align: center;}
.page_breack{
clear: both;
page-break-after: always;
}
</style>
<table class="body" align="center" style="border-top: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333;">
<tr>
<td>
<div id="header">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 30%">
<img style="width: 250px" src="<?=$this->basePath();?>/manifests/generate-barcode/<?php echo $results[0]['runsheetNumber']; ?>">
</td>
<td style="width: 70%">
<table class="row" style="width: 100%">
<tr>
<td >Location: <?php echo $results[0]['branchName']; ?></td>
</tr>
<tr>
<td >Website: www.xfas.in</td>
</tr>
<tr>
<td >
Daily Runsheet for : <?php echo $results[0]['allocated'.$results[0]['allocatedTo'].'Code'].' - '.$results[0]['allocated'.$results[0]['allocatedTo'].'Name']; ?>
</td>
</tr>
<tr>
<td class="text-right">
<strong>Printed # : <?php echo date('d.m.Y'); ?></strong>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table width="100%" style="border-collapse: collapse;">
<tr>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">SNo.</th>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">AwbNo.</th>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">Consignee Details</th>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">Pin Code</th>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">Signature</th>
</tr>
<?php if(count($items) > 0):
foreach ($items as $key => $val):
// $key = $key +1;
?>
<tr class="<?php
++$key;
if($key%14 == 0 && $key !=0)
echo "page_breack";
//echo ++$key; ?>" ><td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"><?php echo $key; ?></td>
<td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"><?php echo $val['Awb']; ?></td>
<td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"><strong><?php echo $val['Consignee']; ?></strong><br>
<?php echo $val['Address'].', '.$val['Place'].', '.$val['ConsigneeArea']; ?>
</td>
<td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"><?php echo $val['PinCode']; ?></td>
<td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"></td>
</tr>
<?php endforeach; ?>
<?php
$ramainRow = count($items)%14;
if($ramainRow >0){
// $cnt = 14 - count($items);
for ($i =0; $i < $ramainRow; $i++){?>
<tr>
<td colspan="5" style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"></td>
</tr>
<?php } ?>
<tr>
<td colspan="5" style="font-size: 12px; text-align:center; height: 53px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;">
<strong>Receiver Name:</strong> <?php echo $results[0]['allocated'.$results[0]['allocatedTo'].'Code'].' - '.$results[0]['allocated'.$results[0]['allocatedTo'].'Name']; ?><br>
<strong>Signature:</strong>
</td>
</tr>
<?php }?>
<?php endif;?>
</table>
</td>
</tr>
above is the htm fiel file for better understanding i am givig the pdf fil
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 am using dompdf in codeigniter, the HTML page looks fine but in dompdf generated pdf, there is a black box.
The code in the footer section is:
<div class="signature-footer">
<table>
<tr>
<td style="text-align: center;border-style:dashed; border-top:1px black;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;">Prepared By<br><?php echo $quotation_detail[0]->employee_name; ?><br><?php echo $quotation_detail[0]->designation_name ; ?></td>
<td style="width: 30%;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="text-align: center;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="width: 30%;border-top:1px solid white;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;"> </td>
<td style="text-align: center;border-style:dashed; border-top:1px black;border-bottom:1px solid white; border-left:1px solid white; border-right:1px solid white;">Authorized Signature<br> <br> </td>
</tr>
</table>
</div>
</div><div class="below-border-footer"></div><div style="text-align: center"><img src="<?php echo base_url(); ?>interface/img/footerImage.png"> </div></div></body>
</html>
CSS for these two elements:
.below-border-footer {
width: 100%;
border-top: 0 ;
padding-bottom: 0;
text-align: center;
}
.signature-footer {
font-size: 12px;
font-weight: bold;
width: 100%;
position: relative;
margin-top: 70px;
margin-bottom: 2px;
}
I've tried for hours but no result. How can I remove the black box in the footer?
I have made the following email template,
but instead of shown data in table format; it shows the complete Html codes in the email body. Please help me fix this.
<table style="font-family: Lucida Sans Unicode, Lucida Grande, Sans-Serif; font-size: 12px; background: #fff; margin: 45px; width: 480px; border-collapse: collapse; text-align: left;" summary="Website Uptime Statistics">
<thead>
<tr>
<th style="font-size: 14px; font-weight: normal; color: #039; padding: 10px 8px; border-bottom: 2px solid #6678b1;" scope="col">#S.No.</th>
<th style="font-size: 14px; font-weight: normal; color: #039; padding: 10px 8px; border-bottom: 2px solid #6678b1;" scope="col">Website</th>
<th style="font-size: 14px; font-weight: normal; color: #039; padding: 10px 8px; border-bottom: 2px solid #6678b1;" scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-bottom: 1px solid #ccc; color: #669; padding: 6px 8px;">1</td>
<td style="border-bottom: 1px solid #ccc; color: #669; padding: 6px 8px;">http://google.com</td>
<td style="border-bottom: 1px solid #ccc; color: #669; padding: 6px 8px;">Up</td>
</tr>
<tr>
<td style="border-bottom: 1px solid #ccc; color: #009; padding: 6px 8px;">2</td>
<td style="border-bottom: 1px solid #ccc; color: #009; padding: 6px 8px;">http://google.com</td>
<td style="border-bottom: 1px solid #ccc; color: #009; padding: 6px 8px;">Down</td>
</tr>
<tr>
<td style="border-bottom: 1px solid #ccc; color: #669; padding: 6px 8px;">$300</td>
<td style="border-bottom: 1px solid #ccc; color: #669; padding: 6px 8px;">$300</td>
<td style="border-bottom: 1px solid #ccc; color: #669; padding: 6px 8px;">$300</td>
</tr>
</tbody>
</table>
Have you set the content-type of the email so the receiving email application knows it contains HTML and can therefore present it properly?
Content-Type: text/html; charset=UTF-8
$html = '';
$html .= ' <table style="font-family: Lucida Sans Unicode, Lucida Grande, Sans-Serif; font-size: 12px; background: #fff; margin: 45px; width: 480px; border-collapse: collapse; text-align: left;" summary="Website Uptime Statistics"><thead>';
.....
echo $html;
try this