Hi Frappe community,
I’m working on an email template in ERPNext, and I’m having trouble with table styling. Specifically, the column headers in my table are not aligned correctly, and the text appears cramped together. Here’s an example of my current HTML structure:
But in email preview, it is not working,
@Mohammadsami_Bakhtya Please write html code properly and if you can style your table then use inline css for table from w3school reference.
Example :
<style>#mytable {border: 1px solid #000; width: 100%; border-collapse: collapse; text-align: center;} #mytable td {border: 1px solid #000;} #mytable th {border: 1px solid #000;} #mytable tr {border: 1px solid #000;} </style>
<table id='mytable'>
<tbody>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</tbody>
</table>
I have tried all things.
Have used inline css also, but not working. i hace used simple html to explain the issue.
I have used your html also, here is the preview:
I have used below one also, using inline css, but not working.
{% set cmp = frappe.get_doc("Company", company) %}
<div style="width: 80%; margin: auto;">
<div style="text-align: center; padding: 20px;">
<img src="{{ company.logo }}" alt="{{ company }} Logo" style="max-width: 200px;">
<h1>Sales Invoice</h1>
</div>
<div style="margin: 20px 0;">
<p style="margin: 10px 0;">Dear {{ customer }},</p>
<p style="margin: 10px 0;">Thank you for your purchase. Please find your invoice details below:</p>
<table style="border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2; text-align: left;">Invoice Number</th>
<td style="border: 1px solid #ddd; padding: 8px; text-align: left;">{{ name }}</td>
</tr>
<tr>
<th style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2; text-align: left;">Invoice Date</th>
<td style="border: 1px solid #ddd; padding: 8px; text-align: left;">{{ posting_date }}</td>
</tr>
<tr>
<th style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2; text-align: left;">Due Date</th>
<td style="border: 1px solid #ddd; padding: 8px; text-align: left;">{{ due_date }}</td>
</tr>
</table>
<h2 style="margin-top: 20px;">Invoice Items:</h2>
<table style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2; text-align: left;">Description</th>
<th style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2; text-align: left;">Quantity</th>
<th style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2; text-align: left;">Unit Price</th>
<th style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2; text-align: left;">Total</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td style="border: 1px solid #ddd; padding: 8px; text-align: left;">{{ item.item_code }}</td>
<td style="border: 1px solid #ddd; padding: 8px; text-align: left;">{{ item.qty }}</td>
<td style="border: 1px solid #ddd; padding: 8px; text-align: left;">{{ item.rate }}</td>
<td style="border: 1px solid #ddd; padding: 8px; text-align: left;">{{ item.amount }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<p style="margin-top: 20px;"><strong>Total Amount:</strong> {{ grand_total }}</p>
</div>
<div style="margin-top: 20px; text-align: center;">
<p>If you have any questions, please contact us at {{ cmp.phone_no or "" }} or {{ cmp.email or ""}}.</p>
<p>Thank you for your business!</p>
<p>{{ company }}</p>
</div>
</div>
@Mohammadsami_Bakhtya If you enable the “use HTML” option, the email template will display HTML code correctly. However, if you disable it, the text editor’s preview will no longer render the HTML and will instead show the raw HTML code. Please take note of this behavior.
