I am using mpdf library to generate PDF from HTML.I came across the limitation of mpdf that we cannot use block level elements inside table.Is there any possible way to make mpdf work with following code?. I tried span instead of p but its not act like block level elements.
<table style="width:100%; table-layout:fixed">
<tr>
<td>
<p style="text-align:left;font-size:14px;font-family:Arial;padding-left:105px;">Some text</p>
<p style="text-align:left;font-weight:normal;font-size:14px;font-family:Arial;padding-left:125px;">Some text Some text Some text </p>
</td>
</tr>
</table>
The styles of Block level elements inside table,td won't reflect in PDF.I have fixed above issue with using another table by following.Hope it will help someone.
<table style="width:100%; table-layout:fixed">
<tr>
<td>
<table>
<tr>
<td style="text-align:left;font-size:14px;font-family:Arial;padding-left:105px;">
Some text
</td>
</tr>
<tr>
<td style="text-align:left;font-weight:normal;font-size:14px;font-family:Arial;padding-left:125px;">
Some text Some text Some text
</td>
</tr>
</table>
</td>
</tr>
</table>
Related
I am trying to print this table in TCPDF, the table is rendering fine but it is totally skipping the <tr> row with colspan , this happens to the only row that has the first <td colspan="8"> cell with a colspan.
This is the html table tha:
<table style="font-size:7px;line-height:16px;border:none;" dir="ltr" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width:17%;"></td>
<td>YTD</td>
<td>2019</td>
<td>2018</td>
<td>2017</td>
<td>2016</td>
<td>2015</td>
<td>2014</td>
</tr>
<tr>
<td>Portfolio</td>
<td>-3.63%</td>
<td>14.51%</td>
<td>-5.11%</td>
<td>11.16%</td>
<td>8.48%</td>
<td>-2.13%</td>
<td>2.45%</td>
</tr>
<tr>
<td>Benchmark </td>
<td>-1.64%</td>
<td>9.78%</td>
<td>-3.84%</td>
<td>7.37%</td>
<td>2.92%</td>
<td>-2.66%</td>
<td>0.08%</td>
</tr>
<tr>
<td colspan="8">Morningstar USD Cautious Allocation</td>
</tr>
<tr>
<td></td>
<td>
<p class="double-line">Annualised Return</p>
</td>
<td>
<p class="double-line">Standard Deviation</p>
</td>
<td>
<p class="double-line">Sharpe Ratio</p>
</td>
<td colspan="4"></td>
</tr>
<tr>
<td>Portfolio</td>
<td>4.45%</td>
<td>5.72%</td>
<td>0.78</td>
<td colspan="4"></td>
</tr>
<tr>
<td>Benchmark </td>
<td>2.08%</td>
<td>2.44%</td>
<td>0.85</td>
<td colspan="4"></td>
</tr>
</tbody>
</table>
output on the browser page is fine (see image)
but output on the PDF removes that row completely:
The issue is solved, the problem was not in TCPDF, It was the table not having a proper closing tag for the row </tr> . The table above was coming from a custom field storing it in the DB of a wordpress site. Since the html is generated through a php code I had minor coding error that I forgot to close the row with </tr>. However when viewing the html content in a wordpress WYSWIG editor , it adds the self closing tags. When you debugging it on the browser page also most browsers add auto closing tags. These made me think that the html structure of the table is good and should be an issue with TCPDF. After checking the HTML in the database I finally figured out the table row wasn't closing properly.
Hopefully this will help someone having a similar issue in the future.
Is there a way to display two HTML tables side by side in a PDF-document generated with TCPDF?
I tried inline-CSS but neither float: left nor display: inline-block works.
I am using version 6.2.12.
You should try merging two table inside another parent table like:
<table>
<tr>
<td>
<table>
<tr>
<td>data that you want to display left</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>data that you want to display right</td>
</tr>
</table>
</td>
</tr>
</table>
add this html to variable and then pass that variable into tcpdf menthod writeHTML().
I am able to get the coding of a website with file_get_contents but I want to be able to get certain values out of the html. This piece of code is always the same but the value between the html tag changes from time to time. This is the HTML Code:
<div class="cheapest-bins">
<h3>Cheapest Live Buy Now</h3>
<table>
<tbody><tr>
<th>Console</th>
<th>Buy Now Price</th>
</tr>
<tr class=" active">
<td class="xb1">XB1</td>
<td>1,480,000</td>
</tr>
<tr class="">
<td class="ps4">PS4</td>
<td>1,590,000</td>
</tr>
<tr class="">
<td class="x360">360</td>
<td>---</td>
</tr>
<tr class="">
<td class="ps3">PS3</td>
<td>2,800,000</td>
</tr>
</tbody></table>
</div>
How would I go about getting the: 1,480,000 .. 1,590,000 .. --- and 2,800,000?
short answer:
find a css selector library such as https://github.com/tj/php-selector
then you could grab all td:last-child elements/innerhtml
for your specific example you could just just
preg_match_all('#<td>(.*?)</td>#', $html, $matches);
The text that I am trying to echo from $data is way too long and it is going off the screen beyond the boundaries of the table. In addition to that all the text is getting displayed without line breaks (or blank lines) or proper spacing.
My simple PHP code:
<div id="sampleid1" class="tabcontent" style="margin-left:48px;">
<table width="510" border="0" cellspacing="4" cellpadding="4" class="SampleClass">
<tr>
<td>
<?php echo Sample1_LABEL;?>
</td>
<th align="left"><strong>:</strong>
</th>
<td>
<?php echo $data[ 'Sample1'];?>
</td>
</tr>
<tr>
<td>
<?php echo Sample2_LABEL;?>
</td>
<th align="left"><strong>:</strong>
</th>
<td>
<?php echo $data[ 'Sample2'];?>
</td>
</tr>
</table>
</div>
In Summary:
I need the text that I am retrieving using the $data to get formatted in such a way that the line breaks are displayed in the output upon echoing.
I need that output text to be scrollable so no text will go off the screen beyond the boundaries.
you need to set CSS to the TD tag where you echo that $data...
<td style="height:150px; overflow-y:scroll;">
My mistake.. TD dont accept overflow so you may do this::
<td style="height:150px"><div style="height:100%; overflow-y:scroll;">..PHPCODE...</div></td>
You could echo a <pre> tag around output where whitespace is significant. Something like:
<?php echo "<pre>".Sample1_LABEL."</pre>";?>
You can try this
<td>
<div style="height:100px; overflow:auto">
<?php echo $data['Sample2'];?>
</div>
</td>
You can also try
echo(nl2br($data['Sample2'])); //converts newline to <br /> html tag
If I have these two tables:
<table>
<tr>
<td>Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
How can I make it so that the two columns have the same width?
I can't combine the tables so thats not an option. I also can't use fixed widths since its dynamic content. Any ideas? Perhaps something in javascript to have the top columns match the width of the lower table? I'm no js expert so I have no idea if thats possible or how to do it. Php is an option on the table as well if theres a way to use that to solve it as well.
Are you able to define css for this dynamic content? Suppose these tables were nested inside a div like so:
<div id="content">
<table>
<tr>
<td>Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
</div>
I would write some css like this:
#content table td { width: 80%; }
I would use a percentage-based width on the 'flowing' column, and buffer it with fixed-width columns if necessary. ie.:
<table style="width: 100%;">
<tr>
<td style="width: 80%;">Small Length Content</td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td style="width: 80%;">Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
You can use CSS to accomplish this. You will have to have the longer content wrap.
td{
width:80%;
}
Try
<table>
<tr>
<td style="width:200px">Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
or add a class to name to the td element and define the style somewhere else like an external file or in header style