mise en forme HTML, automation des règles

[Diallo]

Bonjour à tous, j'ai besoin de votre aide

J'ai effectué une automatisation sur l'envoie des tickets aux personnes assignée en format tableau effectué en HTML par mail, mais j'ai un problème de mise en forme, le contenu (texte) de mon entête n'est pas bien aligné.

La même mise en forme hors Jira me donne un alignement correcte mais l'entête de l'envoi de mail n'est pas aligné. C'est juste pour la première et dernière colonne.

Merci d'avance pour votre aide.

[Marc -Devoteam-]

Hi @Diallo 

Please show the configuration of your automation rule and the details of the configuration of mail action.

This will give members of the community more information to see what might cause this.

[Diallo]

Thank you for your feedback,

here is my starting code. The problem is the first and last columns. The title of the first one goes down and the one of the last goes higher (its content); I don't know why even though they have the same dimensions in terms of padding



<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%; font-family: Arial, sans-serif; font-size: 13px;">
<tr style="height: 20px;">
<td style="border: 1px solid #000; background-color: #CDCACA; padding: 1px 3px; text-align: center; font-weight: bold; vertical-align: middle; line-height: 1; height: 20px;">Key</td>
<td style="border: 1px solid #000; background-color: #CDCACA; padding: 1px 3px; text-align: center; font-weight: bold; vertical-align: middle; line-height: 1; height: 20px;">Tasks</td>
<td style="border: 1px solid #000; background-color: #CDCACA; padding: 1px 3px; text-align: center; font-weight: bold; vertical-align: middle; line-height: 1; height: 20px;">Time for this month</td>
<td style="border: 1px solid #000; background-color: #CDCACA; padding: 1px 3px; text-align: center; font-weight: bold; vertical-align: middle; line-height: 1; height: 20px;">Total time</td>
<td style="border: 1px solid #000; background-color: #CDCACA; padding: 1px 3px; text-align: center; font-weight: bold; vertical-align: middle; line-height: 1; height: 20px;">Reporter</td>
<td style="border: 1px solid #000; background-color: #CDCACA; padding: 1px 3px; text-align: center; font-weight: bold; vertical-align: middle; line-height: 1; height: 20px;">Update date</td>
</tr>
{{#lookupIssues}}
<tr style="height: 20px;">
<td style="border: 1px solid #000; padding: 1px 3px; text-align: center; vertical-align: middle; line-height: 1; height: 20px;"><a href="{{toUrl}}" style="color: #0052CC; text-decoration: none;">{{key}}</a></td>
<td style="border: 1px solid #000; padding: 1px 3px; text-align: center; vertical-align: middle; line-height: 1; height: 20px;">{{summary}}</td>
<td style="border: 1px solid #000; padding: 1px 3px; text-align: center; vertical-align: middle; line-height: 1; height: 20px;">{{#=}}(0{{#worklogs}}{{#if(started.isAfter(now.withDayOfMonth(1).toStartOfDay))}}+{{timeSpentSeconds}}{{/}}{{/}})/3600{{/}}</td>
<td style="border: 1px solid #000; padding: 1px 3px; text-align: center; vertical-align: middle; line-height: 1; height: 20px;">{{#=}}(0{{timespent}})/3600{{/}}</td>
<td style="border: 1px solid #000; padding: 1px 3px; text-align: center; vertical-align: middle; line-height: 1; height: 20px;">{{reporter.displayName}}</td>
<td style="border: 1px solid #000; padding: 1px 3px; text-align: center; vertical-align: middle; line-height: 1; height: 20px;">{{updated.withLocale("fr").asMediumDateTime}}</td>
</tr>
{{/}}
</table>

[Jorge Cammarota]

Good morning! Everything's great here, and I hope you are too. Thank you for sharing your questions; I hope the community can help you.

Table model for Jira Automation email

In the Send email body (with the Convert line breaks to HTML line breaks option unchecked), use something in this style:

<table border="0" cellspacing="0" cellpadding="6" style="border-collapse:collapse; width:100%; table-layout:fixed;">
<thead>
<tr style="background-color:#f4f5f7;">
<th style="text-align:left; width:15%; border-bottom:1px solid #dfe1e6; padding:6px;">
Key
</th>
<th style="text-align:left; width:35%; border-bottom:1px solid #dfe1e6; padding:6px;">
Summary
</th>
<th style="text-align:left; width:20%; border-bottom:1px solid #dfe1e6; padding:6px;">
Assignee
</th>
<th style="text-align:left; width:15%; border-bottom:1px solid #dfe1e6; padding:6px;">
Status
</th>
</tr>
</thead>
<tbody>
{{#lookupIssues}}
<tr>
<td style="padding:6px; border-bottom:1px solid #f4f5f7;">
<a href="{{url}}">{{key}}</a>
</td>
<td style="padding:6px; border-bottom:1px solid #f4f5f7;">
{{summary}}
</td>
<td style="padding:6px; border-bottom:1px solid #f4f5f7;">
{{assignee.displayName}}
</td>
<td style="padding:6px; border-bottom:1px solid #f4f5f7;">
{{status.name}}
</td>
</tr>
{{/}}
</tbody>
</table>

Quick explanation:

Same cell type in the header Always use <th> for all header columns (do not mix <td> in the header).

No different colspan / rowspan only in the first or last column If any <th> has colspan="2" or rowspan, the visual width changes and looks "misaligned." Ensure all <th> follow the same pattern (no colspan/rowspan unless you know the exact impact).

Same text-align and width for equivalent columns If the first and last columns are similar (e.g., short fields), set similar width and the same text-align. Example from the model: width:15% on both, text-align:left.

Force table-layout:fixed table-layout:fixed; helps the email client respect column widths better and prevents them from reflowing strangely.

Equal padding and border in all header cells Differences in padding or borders only in the first/last column cause a "misalignment" sensation even if the column is technically correct. In the model, all <th> have exactly: border-bottom:1px solid #dfe1e6; padding:6px;.

Uncheck “Convert line breaks to HTML line breaks” This is documented by Atlassian and avoids extra <br> tags that can break rendering in email clients.

Official documentation link: https://support.atlassian.com/automation/kb/automation-for-jira-how-to-create-a-rule-that-sends-the-list-of-issues-that/

[Diallo]

Thans for your feedback, i tried your advice but it's still happening =>

<table border="0" cellspacing="0" cellpadding="6" style="border-collapse:collapse; width:100%; table-layout:fixed;">
<thead>
<tr style="background-color:#CDCACA;">
<th style="text-align:center; width:10%; border:1px solid #000; padding:6px; font-weight:bold;">Key</th>
<th style="text-align:center; width:30%; border:1px solid #000; padding:6px; font-weight:bold;">Tasks</th>
<th style="text-align:center; width:15%; border:1px solid #000; padding:6px; font-weight:bold;">Time for this month</th>
<th style="text-align:center; width:15%; border:1px solid #000; padding:6px; font-weight:bold;">Total time</th>
<th style="text-align:center; width:15%; border:1px solid #000; padding:6px; font-weight:bold;">Reporter</th>
<th style="text-align:center; width:15%; border:1px solid #000; padding:6px; font-weight:bold;">Update date</th>
</tr>
</thead>
<tbody>
{{#lookupIssues}}
<tr>
<td style="padding:6px; border:1px solid #000; text-align:center;"><a href="{{toUrl}}" style="color:#0052CC; text-decoration:none;">{{key}}</a></td>
<td style="padding:6px; border:1px solid #000; text-align:center;">{{summary}}</td>
<td style="padding:6px; border:1px solid #000; text-align:center;">{{#=}}(0{{#worklogs}}{{#if(started.isAfter(now.withDayOfMonth(1).toStartOfDay))}}+{{timeSpentSeconds}}{{/}}{{/}})/3600{{/}}</td>
<td style="padding:6px; border:1px solid #000; text-align:center;">{{#=}}(0{{timespent}})/3600{{/}}</td>
<td style="padding:6px; border:1px solid #000; text-align:center;">{{reporter.displayName}}</td>
<td style="padding:6px; border:1px solid #000; text-align:center;">{{updated.withLocale("fr").asMediumDateTime}}</td>
</tr>
{{/}}
</tbody>
</table>

The problem is the first and the last column, the title of the first one goes down and the last one goes up higher (its content) I don't know why even though they have the same padding dimensions