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().
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.
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>
I want a required blank in the twig template of PHPPdf PDFBundle in Symfony2. But the HTML Tag don't work here. For example I want a simple table with a blank in each cell:
<pdf>
<dynamic-page>
<table>
<tr>
<td>Line 1</td>
<td>Line 2</td>
</tr>
<tr>
<td>In next cell the blank</td>
<td> </td>
</tr>
</table>
</dynamic-page>
</pdf>
But how I write before, the code is not allowed from the template. How can I get it on another way. And only to write a blank is not possible for each situation.
I found a solution. It works when I use the unicode for a blank
<pdf>
<dynamic-page>
<table>
<tr>
<td>Line 1</td>
<td>Line 2</td>
</tr>
<tr>
<td>In next cell the blank</td>
<td> </td>
</tr>
</table>
</dynamic-page>
</pdf>
i have some problems with my table i have this table for egs
<tr style="">
<td>1</td>
<td>item 1</td>
</tr>
<tr style="">
<td>1.1</td>
<td>item 1.1</td>
</tr>
<tr style="">
<td>1.2</td>
<td>item 1.2</td>
</tr>
<tr style="">
<td>1.1.1</td>
<td>item 1.1.1</td>
</tr>
i use jquery ui sortable but the problem is that if i want to move the item 1 the item1.2 and item 1.1.1 will also follow something like a group
fiddle link http://jsfiddle.net/kN2XL/
You should have a look at nestedSortable to implement this kind of functionality. Example
Unfortuately, you will however need to change your html from tables into a hierarchy, like <ul> <li> etc.
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