DOMPDF creating blank page at the start of document in laravel. I have chacked all html cotent there is no spaces. anybody has suggestion?
Below is code which I am trying to fit into a pdf file using DOMPDF
<div class="invoice printableArea" style="color: #333333; font: 12px Verdana; padding: 0; margin: 0;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main-table"
style="height: 100%;margin-top: 0;">
<tr>
<td align="center" style="width: 100%; height: 100%;">
<table cellpadding="0" cellspacing="0" border="0"
style=" width: 100%; table-layout: fixed; margin: 0px;">
<tr>
<td style=" border: 1px solid #e6e6e6; margin: 0px auto 0px auto; padding: 20px; text-align: left;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0;">
<tr>
<td style="padding:0px 0px 0px 0px;">
<img src="" width="150" height="45" alt=""/></td>
</tr>
</table>
<table cellpadding="0" cellspacing="5" border="0" width="100%" style="border: 1px solid #e6e6e6; padding:0;margin-top:10px;">
<tr valign="top">
<td style="padding: 15px;">
<h2 style="margin: 0px 0px 10px 0px;">Invoice #</h2>
<table style="float:left;border:none;margin:0;" >
<tbody>
<tr>
<td style="padding: 5px;text-align: right;">Invoice Date : </td>
<td style="padding: 5px;text-align: right;"> </td>
</tr>
<tr>
<td style="padding: 5px;text-align: right;"><span>Payment Method : </span></td>
<td style="padding: 5px;text-align: right;"></td>
</tr>
<tr>
<td style="padding: 5px;text-align: right;"><span>Shipping Method : </span></td>
<td style="padding: 5px;text-align: right;"></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 30px 0px 0px 0px;text-align: center;">
<div id="invoiceBarcodeTarget"></div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="5" border="0" width="100%"
style="padding:20px 0px;">
<tr valign="top">
<td width="34%"
style="padding:10px;">
<h3 style=" padding: 0px 0px 3px 1px; margin: 0px;">Billing Address : </h3>
<p style="margin: 2px 0px 3px 0px;">
<strong></strong> </p>
<p style="margin: 2px 0px 3px 0px;">
<br/></p>
<p style="margin: 2px 0px 3px 0px;">
</p>
<p style="margin: 2px 0px 3px 0px;">
</p>
<p style="margin: 2px 0px 3px 0px;">
<i title="Phone" class="fa fa-phone-square"></i>
<br/>
<i title="Phone" class="fa fa-phone-square"></i>
#endif
</p>
</td>
<td width="33%" style="padding:10px;">
<h3 style=" padding: 0px 0px 3px 1px; margin: 0px;">Shipping Address : </h3>
<p style="margin: 2px 0px 3px 0px;">
<strong></strong> </p>
<p style="margin: 2px 0px 3px 0px;">
<br/></p>
<p style="margin: 2px 0px 3px 0px;">
</p>
<p style="margin: 2px 0px 3px 0px;">
</p>
<p style="margin: 2px 0px 3px 0px;">
<i title="Phone" class="fa fa-phone-square"></i>
</p>
#endif
</td>
</tr>
</table>
<table class="" style="background-color: #dddddd;border: 1px solid #e6e6e6;margin:0;">
<tr>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "><strong class="text-center">Sr. No.</strong></th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Product
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Unit price
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Discount
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Quantity
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Subtotal
</th>
</tr>
<tbody>
<tr>
<td style="padding: 5px 10px; background-color: #ffffff;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;text-align: center; ">{{$i}}</td>
<td style="padding: 5px 10px; background-color: #ffffff;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;text-align: left; ">
<b>{{#$product_detail['title']}} </b> <br />
<b>Seller : </b> {{#$product_detail['store_name']}}
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: center;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span><span class="WebRupee">₹</span>{{ number_format(#$product['price'], 2) }}</span>
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: center;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span><span class="WebRupee">₹</span>0.00</span>
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
{{#$product['quantity']}}
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span><span class="WebRupee">₹</span>{{ number_format(#$product['price']*$product['quantity'], 2) }}</span>
</td>
</tr> </tbody>
</table>
<table class="" style="background-color: #dddddd;border: 1px solid #e6e6e6;margin:0;">
<tr>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; "><strong class="text-center">Sr. No.</strong></th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Product
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Unit price
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Discount
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Quantity
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Delivery Address
</th>
<th style="background-color: #f9f9f9; padding: 6px 10px; white-space: nowrap;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
Subtotal
</th>
</tr>
<tbody><tr>
<td style="padding: 5px 10px; background-color: #ffffff;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;text-align: center; ">{{$i}}</td>
<td style="padding: 5px 10px; background-color: #ffffff;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;text-align: left; ">
<b>{{#$product_detail['title']}} </b> <br />
<b>Seller : </b> {{#$product_detail['store_name']}}
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: center;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span><span class="WebRupee">₹</span></span>
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: center;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span><span class="WebRupee">₹</span>0.00</span>
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
1
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span style="text-align:left;float:left;">
</span>
</td>
<td style="padding: 5px 10px; background-color: #ffffff; text-align: right;border-right: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6; ">
<span><span class="WebRupee">₹</span>{{ number_format(#$product['price'], 2) }}</span>
</td>
</tr>
<?php $i++; ?>
#endforeach
#else
<tr>
<td colspan="100%">
{{trans('messages.error.order.order_product.empty')}}
</td>
</tr>
#endif
</tbody>
</table>
#endif
<table style="width:35%;float:right;border:none;" >
<tbody>
<tr>
<td style="padding: 5px;text-align: right;">Subtotal : </td>
<td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">₹</span>{{ number_format(#$invoiceData['invoice']['subtotal'], 2) }}</span></td>
</tr>
<tr>
<td style="padding: 5px;text-align: right;"><span>Order Discount (-) : </span></td>
<td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">₹</span>00.00</span></td>
</tr>
<tr>
<td style="padding: 5px;text-align: right;"><span>Price After Discount : </span></td>
<td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">₹</span>{{ number_format(#$invoiceData['invoice']['total'], 2) }}</span></td>
</tr>
<tr>
<td style="padding: 5px;text-align: right;"><span>Shipping Cost : </span></td>
<td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">₹</span>{{ number_format(#$invoiceData['invoice']['shipping_cost'], 2) }}</span></td>
</tr>
<tr>
<td style="padding: 5px;text-align: right;"><span>Grand Total : </span></td>
<td style="font-weight: bold;padding: 5px;text-align: right;"><span><span class="WebRupee">₹</span>{{ number_format(#$invoiceData['invoice']['total'], 2) }}</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Three things:
1) Nested tables. Generally fine, but your outer table is just a container for the inner table. dompdf is currently unable to break an individual table cell across pages (#98) so this will cause you all kinds of grief. If you have styling on that table that you want to apply (e.g. a border) use a div instead.
2) The height: 100%; styling. Avoid this if you can on elements that are the direct child of the body. dompdf's height calculation can sometimes be off by a bit, causing paging on an element with 100% of the body height.
3) The height: 100%; styling, part 2. The height probably won't be what you expect since dompdf (and by default web browsers) determine height by the content area not the containing box. Margin and padding will further expand the element's height unless everything is specifically set to 0. At least until dompdf supports the box-sizing declaration.
Related
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 using DomPDF to generate a PDF in PHP. I need to put 2 tables side by side.
<table style=" border: 1px solid black !important;">
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">names</td>
<td style=" border: 1px solid black !important;">salary</td>
</tr>
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">Pedro</td>
<td style=" border: 1px solid black !important;">1500</td>
</tr>
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">Jhon</td>
<td style=" border: 1px solid black !important;">450</td>
</tr>
</table>
<table style=" border: 1px solid black !important;">
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">Brand</td>
<td style=" border: 1px solid black !important;">Color</td>
</tr>
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">Ferrari</td>
<td style=" border: 1px solid black !important;">Green</td>
</tr>
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">Daewoo</td>
<td style=" border: 1px solid black !important;">Blue</td>
</tr>
<tr style=" border: 1px solid black !important;">
<td style=" border: 1px solid black !important;">Chevrolet</td>
<td style=" border: 1px solid black !important;">Gray</td>
</tr>
</table>
I tried to put display:inline-block; on the tables but I've got a FatalThrowableError.
Call to a member function get_cellmap() on null
I tried to change display:inline-block to float:left but I've got something like this
They were "side by side" but just the content moved to right. Borders are wrong.
How can I put 2 tables side by side using DomPDF?.
Setting position:absolute on 2nd table and adjusting per right/left/top/bottom css did the trick for me
I have a working datatable on my site, but the initial problem was that there were so many columns and side scrolling would take away the datatable's search function, page numbers and number of entries option. I added the wrap code to my datatable JS code, seen below:
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#mytable').DataTable();
$("#mytable").wrap("<div style='overflow-x: auto' />");
});
}(jQuery));
</script>
Which makes the datatable options fixed and only sidescrolls the table content (this is what I want) but it looks like this:
So, the function works properly now but I'd like to find a way to get the table to be the full width and have the datatable options sit on top and below like it was before, rather than the table being sandwiched between the datatable options.
Here's the full table code:
<div class="dashboardTable" style="width:920px;">
<table id="mytable" style="border: 1px solid #468BBD; border-collapse: collapse; width:100%; margin:0 auto;">
<thead>
<tr style="border: 1px solid #468BBD;">
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumArriv</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumDepart</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">highSideMIUNumArriv</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">highSideMIUNumDepart</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">locationNotes</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">locationComments</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result1)){
?>
<tr>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo ''.$row['serialNumber'].''; ?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumArriv'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumDepart'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['highSideMIUNumArriv'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['highSideMIUNumDepart'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['locationNotes'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['locationComments'];?> </td>
</tr>
<?
}
?>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#mytable').DataTable();
$("#mytable").wrap("<div style='overflow-x: auto' />");
});
}(jQuery));
</script>
Put your table in <div class="table-responsive"> </div> Section
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 am using PHP to send mail of a webpage content. I have a table in the page.
My table does not show row and column borders in email sent using PHP mail.
It does not read the CSS in email.
This is my code:
<div id="table_email" style="width:800px;margin-left:50px; text-align: left;">
<table class="table1">
<tr>
<th>Description</th>
<th colspan="2">Amount</th>
</tr>
<tr>
<td>(A)Package Cost</td>
<td>';$formatedMessag .= $inv[0].'</td>
</tr>
<tr>
<td>(B) Insurance </td>
<td>';$formatedMessag .= $inv[1].'</td>
</tr>
<tr>
<td>(C)Flight / Train</td>
<td>';$formatedMessag .= $inv[2].'</td>
</tr>
<tr>
<td>Add : Service Tax 3% on Rs.(a+b)</td>
<td>';$formatedMessag .=$inv[5].'</td>
</tr>
<tr>
<td>Add : Educational Cess 2% On 3% </td>
<td>';$formatedMessag .= $inv[6].'</td>
</tr>
<tr>
<td>Add : Secondary& Higher Education Cess 1% on 3% </td>
<td>';$formatedMessag .= $inv[7].'</td>
</tr>
<tr style=" font-weight: bold;font-size: 12px;background-color:seashell;">
<td>Total Payable Amount</td>
<td>';$formatedMessag .='INR ' . $inv[9].'</td>
</tr>
';$formatedMessag .='
</table>
</div>
This is my CSS:
.table1{
width: 990px;
margin-left: 5px;
border: 1px solid #CDCDCD;
}
.table1 th{
background: none repeat scroll 0 0 #EEEEEE;
padding: 10px;
font-size: 11px;
color: #777777;
border: 1px solid #CDCDCD;
}
.table1 tr{
padding: 10px;
font-size: 11px;
height: 30px;
border: 1px solid #CDCDCD;
}
.table1 tr td:first-child{
font-weight: bold;
text-align: left;
border: 1px solid #CDCDCD;
}
.table1 td{
padding-left: 3px;
border: 1px solid #CDCDCD;
color: #333333;
}
This is because when you sent a mail it can't access the style class,
Instead of this <table class="table1"> use inline css like:
<table style='width: 990px; etc;'>.