NetSuite Advanced PDF Templates: How to Fix Table Cell Alignment Justification Anomaly

This article is relevant if you are working with NetSuite Advanced PDF Templates, and you are encountering an unusual HTML table <td> cell alignment effect in the generated PDF.

Background

I have spent a lot of time building HTML table structures for many Advanced PDF Templates. Getting the column widths and cell alignments perfectly calibrated can be a challenging and rewarding task. For the most part, the hard work pays off. However, sometimes I will see an anomaly with the PDF rendering engine that tries my patience. Perhaps, you have seen some yourself. In my case, I found myself wrestling with an unusual, <td> cell alignment and wrapping effect. In most cases the effect was minimal, but in a few other cases, the unwanted cell effect was more pronounced. In either case, I needed to figure this one out.

Basic HTML Code for Table Cell Alignment

Here is the typical HTML code used for structuring the <td> cells of my table.

<td align="center" colspan="2">${record.duedate}</td>
<td align="center" colspan="2">${record.terms}</td>
<td align="center" colspan="2">${record.otherrefnum}</td>

I would think that this code would work flawlessly. However, there can be inconsistencies with the PDF rendering engine. In my example here, I would expect the data in “PO #” column to be nicely aligned in the center of the cell. But that’s not what was happening in the final PDF. After some experimentation with all sorts of inline styling effects, spans, and column width adjustments, I ended up with a simple and effective fix for this cell alignment anomaly.

Modified HTML Code for Table Cell Alignment

Here is the modified HTML code. The last line shows the fix for the unexpected cell alignment in the “PO #” column.

<td align="center" colspan="2">${record.duedate}</td>
<td align="center" colspan="2">${record.terms}</td>
<td align="center" colspan="2"><p style="text-align: center;">${record.otherrefnum}</p></td>

Notice that the trick is to simply wrap my cell contents inside of a <p> tag. Then add the proper style declaration “style=” with the desired text alignment parameter “text-align: center;” or whatever other text alignment I want. This simple technique will ensure proper alignment of my cell contents every time. Of course, not all of my columns need this effect; but for those columns that are problematic, this little trick works like a charm.

Accelerate your NetSuite PDF and HTML Development

If you are looking for ways to enhance your Advanced PDF Templates, and NetSuite’s implementation doesn’t seem to directly support your objectives, we offer the Content Renderer Engine to help you accelerate your development giving you control, flexibility and more rapid development.
Contact us to discuss your application.

Be Sociable, Share!

• 
• 

Marty Zigman

Holding all three official certifications, Marty is regarded as the top NetSuite expert and leads a team of senior professionals at Prolecto Resources, Inc. He is a former Deloitte & Touche CPA and has held CTO roles. For over 30 years, Marty has produced leadership in ERP, CRM and eCommerce business systems. Contact Marty to set up a conversation.

More Posts - Website - Twitter - Facebook - LinkedIn - YouTube