Help styling Invoices - table alignment

1

Hello Lubos -

I am trying to achieve a certain look and feel with invoices. I know how to work with Liquid tags but my table styling is off. When I sent max-width on a table, it shows up ok in Manager but on PDF it renders in full-width. Any idea? here’s the code I’m working with…

             <td style="font-weight: bold; font-size: 32px;float: right; text-align: right;">{{ title }}</td>   
            </tr></table>
            
             <table style="border-width: 1px; padding-right: 20px; float: right; text-align: right; max-width:17% !important;"><tr>
                <td >
                    {% for field in fields %}
                    <div style="font-weight: bold">{{ field.label }}</div>
                    <div style="margin-bottom: 10px">{{ field.text }}</div>
                    {% endfor %}
                </td><br />
                 </tr></table>
            
            <table style="margin-bottom: 20px; padding-left: 65px;"><tr>
             <td style="width: 1px; white-space: nowrap; font-size: 15px;">
                    <div style="font-weight: bold">{{ business.name }}</div>
                    <div>{{ business.address | newline_to_br }}</div>
                    <div>{{ business.identifier }}</div>
                </td>
            </tr></table>
            
            <table cellspacing="5" style="max-width:17% !important; border:2px solid #000; border:2px solid #000;"><tr>
                <td>
                    <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div>
                    <div>{{ recipient.address | newline_to_br }}</div>
                    <div>{{ recipient.identifier }}</div>
                </td>
                </tr></table>
                
               
               
            
            <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
        </td>
    </tr>
    <tr>
        {% for column in table.columns %}            
        <td style="font-weight: bold; padding: 5px 10px; text-align: {{ column.align }}; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if column.nowrap %}; width: 80px{% endif %}">{{ column.label }}</td>
        {% endfor %}
    </tr>
</thead>
<tbody>
    {% for row in table.rows %}
    <tr>
        {% for cell in row.cells %}
        <td style="padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
        {% endfor %}
    </tr>
    {% endfor %}
    <tr>
    {% for column in table.columns %}            
        <td style="border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}">&nbsp;</td>
    {% endfor %}
    </tr>
    {% for total in table.totals %}
    <tr>
        <td colspan="{{ table.columns | size | minus:1 }}" style="padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
        <td style="border-left-width: 1px; white-space: nowrap; border-right-width: 1px; border-bottom-width: 1px; padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
    </tr>
    {% endfor %}

    {% for field in custom_fields %}
    <tr>
        <td colspan="99">
            <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
            <div>{{ field.text | newline_to_br }}</div>
        </td>
    </tr>
    {% endfor %}

    {% if emphasis.text != null and emphasis.positive %}
    <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr>
    {% endif %}

    {% if emphasis.text != null and emphasis.negative %}
    <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr>
    {% endif %}
        
</tbody>
2

please understand this is not a coding forum. customizing a theme is completely upto the user and no support for the same is provided.

to answer your question, not all attributes and tags are supported in Manager themes. understand the default theme and make changes accordingly, just like the width is never defined as a percentage anywhere in the default theme. search the forum and you will get many other related answers.

also understand that Manager itself works like a browser, so any customization would seem perfect on the view screen but that is not the case when saved as pdf as the pdf generator would not support most styles.