PDF Template Tables - doesn't print cells - all data on top of each other

[crmclients]

• professional - meaning opposite of the black and white default - your colors look great!
• professional as in not amateur not simple, designed well, thoughtful design - all good

I was just trying to use just text color as I couldn't figure out how to do backgrounds but your example helped with a better look with colored bars.

here is what I have so far....i have to fix the span and want to make "quote detail"

• haven't decided on lines just yet, blue is my clients colors and I did reverse background to save on ink only because I know they do print outs
• i might do a thin line under the header

[crmclients]

this is what I have so far, i did 10 column span - sorry didn't see your post above but I made the adjustment - i thought - maybe that is why it is off?
I'll match it up with the other one or put it back! Thanks for the tip

<table>
<tbody>
<tr>
<td style="width: 51%; padding: 3px 2px; font-size:11px; text-align: left"> <br>
{{name}}<br>
{{contactName}}&nbsp;{{accountName}}<br>
{{account.billingAddressStreet}}<br>
{{account.billingAddressCity}},{{account.billingAd dressState}}&nbsp;

</td>
<td style="width: 22%; font-size:11px; padding: 3px 2px; text-align: right">
Job Name: {{name}}<br>
Quote Total: {{amount}}<br>
Quote Good Through: {{closeDate}}<br>
</td>
<td style="width: 22%; font-size:11px; padding: 3px 2px; text-align: left">


</td>
<td width="5%"><span style="font-size: 10px; padding: 3px 2px; font-weight: normal;">&nbsp;</span></td>
</tr>
</tbody>
</table><br><br>
Quote By: {{assignedUserName}} {{assignedUser.phoneNumber}}



Job Name:&nbsp;<br>
Quote Total: &nbsp;<br>
Quote Good Through:&nbsp;<br>


{{name}}<br>
{{amount}}<br>
{{closeDate}}

<span style="font-size: 10px; padding: 3px 2px; font-weight: normal;">&nbsp;</span>

<br><br>
Quote By: {{assignedUserName}} {{assignedUser.phoneNumber}}
<br><br>

<table colspan="12" style="font-size: 11px;" width="100%" cellspacing="1">
<tbody>
<tr>
<td colspan="10" style="background-color: #333777;text-align: center; color: #ffffff;" width="100%"> Quote Detail</td>
</tr>
<tr>
<td colspan="2" style="color: #333777;text-align: center;" width="45%">Item</td>
<td colspan="2" style="color: #333777;text-align: right;" width="10%">Unit Price</td>
<td colspan="4" style="color: #333777;text-align: center;" width="20%">Quantity</td>
<td colspan="2" style="color: #333777;text-align: center;" width="20%">Item Total</td>
</tr>


<!-- {{#each opportunityItems}} -->
<tr>
<td colspan="2" style="color: #333777;" width="45%">{{name}}</td>
<td colspan="2" style="color: #333777;text-align: right;" width="10%">${{unitPrice}}</td>
<td colspan="4" style="color: #333777;text-align: center;" width="20%">{{qty}}</td>
<td colspan="2" style="color: #333777;text-align: right;" width="20%">${{itemTotal}}</td>
</tr>


<!-- {{/each}} -->
<tr><td colspan="2" style="background-color: #333777;color: #ffffff;text-align: center;" width="45%"></td>
<td colspan="2" style="background-color: #333777;color: #ffffff;text-align: right;" width="10%"></td>
<td colspan="4" style="background-color: #333777;color: #ffffff;text-align: right;" width="20%">Total</td>
<td colspan="2" style="background-color: #333777;color: #ffffff;text-align: right;" width="20%">${{amount}}</td>
</tr>
</tbody>
</table>

[item]

Don't use :
<span>. or <br> (or exeptionnel)
use always table tr and td.. so you can adapt colspan, right, left, width..
so table do "<br>" ..
it's my experiment who say that

why : colspan 12 => boostrap https://getbootstrap.com/

not tested but for line :

https://www.w3schools.com/howto/howto_css_dividers.asp

there are on doc espocrm how make a line

[crmclients]

ok I think I see what you are saying

regarding <br> if you have 3 fields in one cell that need to be stacked, how else would you put one one each line? word wrap is not a good option...

<td style="width: 50%; font-size:11px; padding: 3px 2px; text-align: right">
Job Name:{{name}}<br>
Quote Total: {{amount}}<br>
Quote Good Through:{{closeDate}}
</td>

[item]

you have too : https://www.w3schools.com/tags/att_td_rowspan.asp

i think is more "canon" (beautifull) to play with rowspan and colspan..

your sample here above is .. not aligned :s
(i am not a designer.. so it's just my "avis" )

[shalmaxb]

Hi, I use <br> in td and it works for me. But I will try the optíonal possibilities mentioned by item.

[crmclients]

ooooh well thanks for the tip, the line looks great - ill check out optional <br> methods

[item]

sample without many style and correct tag

<table>
<tr>
<td rowspan=4>{{photoOfUser}}</td>
<td>{{name}}</td>
<td>{{job}}</td>
<td>{{amount}}</td>
​​​
</tr>

</table>

something like this ..

[crmclients]

then output is this

{{photoOfUser}}

{{name}}

{{job}}

{{amount}}

i need this

{{photoOfUser}} {{name}} {{job}} {{amount}}

but I can you can just create more rows - so 4 rows instead of one

[item]

sorry, it's so ..
as you see.. first tr have 2 td.. the other 1 td.. because first td have rowspan 3

<table style="line-height: 1.36; background-color: #ffffff;width: 100%;" cellpadding="0">
<tbody>
<tr>
<td width="60%" rowspan="3"><span style="color: rgb(198, 177, 28); font-size: 64px;text-align: left;">NOTE</span></td>
<td width="40%">{{patient.name}}</td>
</tr>
<tr>
<td width="40%">{{patient.addressStreet}}</td>
</tr>
<tr>
<td width="40%">{{patient.addressPostalCode}} {{patient.addressCity}}</td>
</tr>
</tbody>
</table>

[crmclients]

ooooh got it, thanks so much for clarifying - trying my best
progress so far - needs a lot of adjustment but way better than this am thanks to you guys

[item]

nice congratulation,
my opinion :
bottom the line (hr) .. need 3 td or 4 ..!
quantity value (not header) align right
in europ .. $ is at end .. maybe it's front in america ?
before tr total .. i add just a blanc tr/td .. so total is a little "more visible" (you can add <b>{{value}}</b>) => bold

Else nice..

[crmclients]

thx! it is in the front in the US - i do need to fix quantity, the column is good but to far from item total

i was trying for zebra stripe, have to play with that more, doing all or nothing with odd and even
have to fix the header line spacing

so happy though, i almost gave up!

[item]

oufti .. google translate give me a traduction ... waouw.. nobody understand
i hope you are near goal

[crmclients]

dude! no problem I know french! French toast, french doors, french fries sorry irrésistible

THX! c'est devant les USA - j'ai besoin de fixer la quantité, la colonne est bonne mais loin du total de l'article

J'essayais d'ombrer les lignes Je dois tester cela plus, actuellement il teinte toutes ou aucune des lignes

doit également définir l'espacement des lignes d'en-tête

si heureux cependant, j'ai presque abandonné!