I've got a Joomla site that uses JCE but keep getting double lines on tables on PDFs

General
1

I’ve got a site that uses the Calcbuilder component to generate drawings from customer input. I use JCE pro in the backend of my site.

My problem is that even though my tables show up fine on the screen, SOME of the lines are doubled when the user exports to PDF.

Does someone have any idea what I should add or remove from my HTML to fix this?

<table border="1" cellpadding="5" cellspacing="0">
    <tbody>
        <tr>
            <td colspan="2" style="border: 1px solid #000000;"><img src="images/4_to_6_high_with_bottom_wire_in_concrete.jpg" alt="4 to 6 high with bottom wire" width="700" height="335" style="float: left;" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td style="border: 1px solid #000000;"><span style="font-size: 8pt;"></span>
                <p><span style="font-size: 12pt;"><strong>Specification:</strong></span></p>
                <p>&nbsp;</p>
                <p><span style="font-size: 8pt;">Fence to be ##FenceHeight## high.</span></p>
                <p><span style="font-size: 8pt;">Terminal posts to be ##TerminalPosts## mild steel tubing, installed at each end, corner, and gate in ##TerminalPostConcreteDiameter## inch diameter by ##TerminalPostConcreteDepth## inch deep concrete footings.</span></p>
                <p><span style="font-size: 8pt;">Terminal posts will be fitted with steel tension bands at approximately 12-inch centers to accommodate tension bars.</span></p>
                <p><span style="font-size: 8pt;">Line posts to be ##LinePosts## spaced at ##LinePostSpacing## foot centers and installed in ##LinePostConcreteDiameter## inch diameter by ##LinePostConcreteDepth## inch deep concrete footings.</span></p>
                <p><span style="font-size: 8pt;">Terminal posts are to have dome caps, and line posts are to have eye tops/loop caps of sufficient size to cover the top of each post completely and prevent water ingress.</span></p>
                <p><span style="font-size: 8pt;">Chain link fabric to be ##ChainLinkFenceFabricType##, with a ##ChainLinkFabricFinish## with a matching ##BottomWireType## and ##FittingMaterial## fittings.</span></p>
                <p><span style="font-size: 8pt;">Fence ties to match the fence are to be installed at ##TieWireSpacing## inch centers, and hog rings to attach fence fabric to the bottom wire to be spaced at ##HogRingSpacing## inches.</span></p>
                <p>&nbsp;</p>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="border: 1px solid #000000;"><strong><span style="font-size: 12pt;">##FenceColor## ##ProjectType## Chain Link Fence ##FenceHeight## High</span></strong></td>
            <td rowspan="6" style="border: 1px solid #000000; vertical-align: top;">
                <p><strong><span style="font-size: 12pt;">##CompanyName##</span></strong></p>
                <span style="font-size: 8pt;">##CompanyWebsite##</span><br /><span style="font-size: 8pt;">##CompanyPhoneNumber##</span><br /><span style="font-size: 8pt;">Prepared By: ##PreparedBy##</span><br /><span style="font-size: 8pt;">Email: ##ContactEmail##</span><br /><span style="font-size: 8pt;">##Date##</span>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="border: 1px solid #000000;"><span style="font-size: 8pt;">Client Name: ##ClientName##</span></td>
        </tr>
        <tr>
            <td colspan="2" style="border: 1px solid #000000;"><span style="font-size: 8pt;">Project Name: ##ProjectName##</span></td>
        </tr>
        <tr>
            <td colspan="2" style="border: 1px solid #000000;"><span style="font-size: 8pt;">Drawing Number: ##DrawingNumber##</span></td>
        </tr>
        <tr>
            <td colspan="2" style="border: 1px solid #000000;"><span style="font-size: 8pt;">Revision Number: ##RevisionNumber##</span></td>
        </tr>
        <tr>
            <td colspan="2" style="border: 1px solid #000000;"><span style="font-size: 8pt;">Scale: NTS</span></td>
        </tr>
    </tbody>
</table>

I tried changing the table cellspacing to 0, but that’s not working on all the lines.

Tried using the JCE table properties to edit the lines, but that’s REALLY bad and doesn’t really do anything.

2

The issue with doubled lines in exported PDFs could be due to how borders are rendered in both HTML and the PDF export process. Since you’ve already set cellspacing="0", and it’s not working consistently, here are additional steps you can try:

1. Apply Border Collapsing

Add border-collapse: collapse; to the table’s inline styles or CSS. This will remove any spacing between table cells and ensure that borders are not doubled.

Modify your table like this:

<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse;">

2. Explicit Border Width

Define the border width more explicitly by using border-width: 1px; in the styles for td and tr. This ensures that only one border is drawn.

For example:

<td colspan="2" style="border: 1px solid #000000; border-width: 1px;">

3. Border Collapse with tr and td

Make sure that all td and tr elements also have the border-collapse property applied if they are not inheriting it.

4. Check PDF Library

Some PDF export libraries interpret borders differently. If you’re using a specific plugin or library to export the table to PDF, ensure that it supports border-collapse. You can consult the documentation or try an alternative PDF generator.

5. Apply Consistent Styles

Ensure that there are no conflicting CSS styles elsewhere on the page or within the PDF export process that might override your table’s styles. Try adding !important to the CSS properties if necessary:

<td style="border: 1px solid #000000 !important; border-collapse: collapse !important;">

6. Remove Redundant Borders

If both the td and table have borders applied, it can sometimes cause doubling effects in PDFs. Make sure only one border (either at the table or the cell level) is explicitly set.

Implementing these steps should resolve the issue with doubled lines in your PDF exports. Let me know how it works!