I am using the webform’s email handler to send the submitted data (with swift mailer and mimemail). I did use inline CSS in both email body and PDF attachment but it just would not apply CSS in email while it renders perfectly in pdf.
<p>[webform_submission:webform]</p> <table style="border-collapse: collapse; border: 1px solid rgba(5, 138, 222, 0.67); empty-cells: show; margin: 1%; width: 100%; table-layout: auto;"> <tr> <th style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">MAKE CHECKS PAYABLE TO:</th> <th style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">SPECIAL HANDLING (CHECK ONE)</th> </tr> <tr> <td>[webform_submission:values:make_checks_payable_to_]</td> <td rowspan="2">[webform_submission:values:special_holding]</td> </tr> <tr> <td>[webform_submission:values:address]</td> </tr> </table> <br> <table style="border-collapse: collapse; border: 1px solid rgba(5, 138, 222, 0.67); empty-cells: show; margin: 1%; width: 100%; table-layout: auto;"> <tr> <th style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">REQUEST BY</th> <th style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">TODAY'S DATE</th> <th style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;" colspan="2">DUE DATE</th> </tr> <tr> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;">[webform_submission:values:requested_by_01_requested_by_2]</td> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;">[webform_submission:values:requested_by_01_today_s_date]</td> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;" colspan="2">[webform_submission:values:requested_by_01_due_date]</td> </tr> <tr> <td style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">REQUEST CURRENCY</td> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;">[webform_submission:values:currency_rate_01_request_currency]</td> <td style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">EXCHANGE RATE</td> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;">[webform_submission:values:currency_rate_01_exchange_rate]</td> </tr> </table> <br> <table style="border-collapse: collapse; border: 1px solid rgba(5, 138, 222, 0.67); empty-cells: show; margin: 1%; width: 100%; table-layout: auto;"> <tr> <th style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">QTY</th> <th style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">PURPOSE</th> <th style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">ACCOUNT CODE</th> <th style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">TOTAL PRICE</th> </tr> {% for my_item in data.item %} <tr> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;">{{my_item.qty}}</td> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;">{{my_item.purpose}}</td> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;">{{my_item.acct_num}}</td> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;">{{'$ ' ~ my_item.total}}</td> </tr> {% endfor %} <tr> <td colspan="3" style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">SUBTOTAL</td> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;">[webform_submission:values:balance_due_01_sub_total]</td> </tr> </table> <table style="border-collapse: collapse; border: 1px solid rgba(5, 138, 222, 0.67); empty-cells: show; margin: 1%; width: 100%; table-layout: auto;"> <tr> <th style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">AUTHORIZED PURCHASER</th> <th style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">DIRECTOR APPROVAL</th> </tr> <tr> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;" height="100"></td> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;" height="100"></td> </tr> <tr> <th style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">ACCT APPROVAL</th> <th style="background-color: rgba(143, 220, 242, 0.67); border: 1px solid rgba(5, 138, 222, 0.67); border-left: 1px solid rgba(5, 138, 222, 0.67); border-bottom: 1px solid rgba(5, 138, 222, 0.67); color: #000000; text-align: center; font-weight: bold; vertical-align: middle; padding: .75em .5em;">EXEC APPROVAL</th> </tr> <tr> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;" height="100"></td> <td style="text-align: right; border: 1px solid rgba(5, 138, 222, 0.67); vertical-align: middle; padding: .75em .5em;" height="100"></td> </tr>
Excuse my long code but I had to do it this way instead since only inline CSS would be rendered (yet it still wouldn’t)
In case if the Plain Text for the Text format needs to be changed, I can’t because it’s the only option given.