Comment formater une table html pour le courrier électronique

J'ai une zone sur mon site que l'user peut download un file excel et il est traité sur le server. Dans le même time, lors du traitement du file Excel dans une table de données, le programme établit un rapport pour returnner à l'user pour leur faire savoir quelles parties nous avons été ajoutées avec succès et celles qui n'ont pas été ajoutées.

Ce que je fais, c'est envoyer un courrier électronique au rapport et afficher le rapport à l'écran dans une window contextuelle afin que l'user puisse examiner instantanément les éléments ajoutés et les pièces rejetées.

Le formatting pour le rapport semble très bien sur l'écran, mais dans le courrier électronique, il ne semble pas si bon.

Quelqu'un peut-il regarder ce code et me dire comment intégrer mon style afin qu'il soit aussi bon dans les courriels?

–Le code–

static async Task<ssortingng> BuildTableReportAsync(DataTable dt, ssortingng caption) { return await Task.Run(() => { SsortingngBuilder sb = new SsortingngBuilder(); sb.Append("<html><body><table class='reportWrapperTable' cellspacing='0'cellpadding='4' rules='rows' style='color:#1f2240;background-color:#ffffff'><thead style='100%;color:#ffffff;background-color:#1f2240;font-weight:bold'><tr>"); foreach (DataColumn c in dt.Columns) { sb.AppendFormat("<th scope='col'>{0}</th>", c.ColumnName); } sb.AppendLine("</tr></thead><caption style='background-color:#ffffff;color:#1f2240;,margin-bottom:1em;font-size:18pt;width:100%;border:0'>" + caption + "</caption><tbody>"); foreach (DataRow dr in dt.Rows) { sb.Append("<tr>"); foreach (object o in dr.ItemArray) { sb.AppendFormat("<td>{0}</td>", HttpUtility.HtmlEncode(o.ToSsortingng())); } sb.AppendLine("</tr>"); } sb.AppendLine("</tbody></table></body></html>"); dt.Dispose(); return sb.ToSsortingng(); }); }

– Le premier résultat instantané lors de la visualisation de la table dans un browser –

– Le résultat de la seconde prise de vues lors de l'affichage de la table dans un courrier électronique. C'est celui sur lequel l'en-tête et la légende ont l'air mauvais .–

Vue du navigateur sous écran

Vue par courrier électronique

Voici le code HTML

 <table class="reportWrapperTable" cellspacing="0" cellpadding="4" rules="rows" style="color:#1f2240;background-color:#ffffff"><thead style="100%;color:#ffffff;background-color:#1f2240;font-weight:bold"><tr><th scope="col">Number</th><th scope="col">Name</th><th scope="col">Length</th><th scope="col">Width</th><th scope="col">Height</th><th scope="col">PackageQty</th><th scope="col">UnitMeasure</th><th scope="col">Cost</th><th scope="col">Profile</th><th scope="col">Category</th></tr></thead><caption style="background-color:#ffffff;color:#1f2240;,margin-bottom:1em;font-size:18pt;width:100%;border:0">AlumCloud Parts Not Added Report</caption><tbody> <tr><td>OB122</td><td>FR 2F OB OP S-CL FB/FG400</td><td>0</td><td>75.5</td><td>85.75</td><td>1</td><td>Each</td><td></td><td>1 3/4 x 4</td><td>Door Frame (Package)</td></tr> <tr><td>OB612</td><td>FR 1FT OB OP S-CL LOK/FG450</td><td>0</td><td>39.5</td><td>126</td><td>1</td><td>Each</td><td>0</td><td>1 3/4 x4 1/2</td><td>Door Frame (Package)</td></tr> <tr><td>CD212</td><td>NS OP CAL 3' x 7' DO /BR 9.5</td><td>0</td><td>36</td><td>84</td><td>1</td><td>Each</td><td>0</td><td>N/A</td><td>Door Leaf(Package)</td></tr> </tbody></table>

Voici un exemple fluide . Parce que vous avez tellement de colonnes, une table fixe peut fonctionner mieux: vous pouvez simplement modifier les% largeurs pour les largeurs de pixels fixes et append autant de colonnes que nécessaire, en vous assurant que chaque ligne est la même. Assurez-vous simplement que les largeurs des cols s'ajoutent toujours à la largeur de la table.

C'était la légende. Je déplace la <caption> pour être la première balise juste après la <table> début <table> .

 <table class="reportWrapperTable" cellspacing="4" cellpadding="2" width="100%" rules="rows" style="border-collapse:collapse;color:#1f2240;background-color:#ffffff"><caption style="background-color:#ffffff;color:#1f2240;margin-bottom:.5em;font-size:18pt;width:100%;border:0">AlumCloud Parts Not Added Report</caption><thead style="100%;color:#ffffff;background-color:#1f2240;font-weight:bold"><tr><th scope="col" style="background-color:#1f2240">Number</th><th scope="col" style="background-color:#1f2240">Name</th><th scope="col" style="background-color:#1f2240">Length</th><th scope="col" style="background-color:#1f2240">Width</th><th scope="col" style="background-color:#1f2240">Height</th><th scope="col" style="background-color:#1f2240">PackageQty</th><th scope="col" style="background-color:#1f2240">UnitMeasure</th><th scope="col" style="background-color:#1f2240">Cost</th><th scope="col" style="background-color:#1f2240">Profile</th><th scope="col" style="background-color:#1f2240">Category</th></tr></thead><tbody> <tr><td>OB122</td><td>FR 2F OB OP S-CL FB/FG400</td><td>0</td><td>75.5</td><td>85.75</td><td>1</td><td>Each</td><td></td><td>1 3/4 x 4</td><td>Door Frame (Package)</td></tr> <tr><td>OB612</td><td>FR 1FT OB OP S-CL LOK/FG450</td><td>0</td><td>39.5</td><td>126</td><td>1</td><td>Each</td><td>0</td><td>1 3/4 x4 1/2</td><td>Door Frame (Package)</td></tr> <tr><td>CD212</td><td>NS OP CAL 3' x 7' DO /BR 9.5</td><td>0</td><td>36</td><td>84</td><td>1</td><td>Each</td><td>0</td><td>N/A</td><td>Door Leaf(Package)</td></tr> </tbody></table>