<style> not working as intended for <table> on Outlook 2007 <h1> Problematic </h1> <p>&lt; style> tags don't seem to work properly in an Email sent to Outlook 2007.</p> <h1> Context </h1> <p>I use an asp.net server to send an Email with a table. This table has the inputs that the client entered.</p> <h2> What it should do </h2> <p><img src="https://i.stack.imgur.com/JBcBp.jpg" alt="Table (From JSFiddle)"><br> <a href="http://jsfiddle.net/6tca6/" rel="nofollow noreferrer">PrintScreened from JSFiddle</a></p> <h2> What it does </h2> <p><img src="https://i.stack.imgur.com/sHOJY.jpg" alt="Table (From Outlook 2007)"><br> PrintScreened from Outlook 2007 message.</p> <h1> Stipulations</h1> <p>The VB code doesn't matter (as it sends the Email properly), the problem comes from the <code>mailMessage.body</code> text.</p> <p>Here is the code for it :</p> <pre><code>Dim table As String Dim mailMessage As New MailMessage() 'There are two multiline textboxes which I want to create a table from table = "&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Length&lt;/th&gt;&lt;th&gt;Force&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;" For i = 0 To UBound(Split(length.Text, Environment.NewLine)) table += "&lt;tr&gt;&lt;td&gt;" &amp; Split(length.Text, Environment.NewLine)(i) &amp; "&lt;/td&gt;" table += "&lt;td&gt;" &amp; Split(force.Text, Environment.NewLine)(i) &amp; "&lt;/td&gt;&lt;/tr&gt;" Next table += "&lt;/tbody&gt;&lt;/table&gt;" mailMessage.Body = table &amp; _ "&lt;style&gt;" &amp; vbCrLf &amp; _ "table {display: inline-table; border:3px solid; border-collapse:collapse;}" &amp; vbCrLf &amp; _ "thead {border:2px solid;}" &amp; vbCrLf &amp; _ "tbody {border:1px solid;}" &amp; vbCrLf &amp; _ "th {border:1px solid; padding:3px;}" &amp; vbCrLf &amp; _ "td {font-size:90%; border:1px solid; padding:3px; text-align:left;}" &amp; vbCrLf &amp; _ "&lt;/style&gt;" </code></pre> <p>This <em>should</em> translate into <a href="http://jsfiddle.net/6tca6/" rel="nofollow noreferrer"><em>this</em></a>, but something goes wrong in the process.</p> <p>From <a href="https://www.campaignmonitor.com/css/" rel="nofollow noreferrer">https://www.campaignmonitor.com/css/</a>, all the <code>style</code> commands I used should work..</p> <h1> Question </h1> <p>What have I done wrong?</p> <h2> Update 1 </h2> <p>I tried to put the <code>&lt;style&gt;</code> tags in front of the table, it did this :</p> <pre class="lang-asp prettyprint-override"><code>&lt;style&gt;[...]&lt;/style&gt; &lt;table&gt;[...]&lt;/table&gt; </code></pre> <p><img src="https://i.stack.imgur.com/sG0Nw.jpg" alt="Style in front"></p> <p>It seems like the last CSS command overwrites all of the previous ones (table 3px border gets overwritten by <code>td</code>...)</p> <p>I tried <em>JRulle</em> proposition, it gave this :</p> <p><img src="https://i.stack.imgur.com/92Qw9.jpg" alt="JRulle&#39;s proposition"></p> <p>Both of those will work in case no solution is found, but I would really want to have the table borders bigger than the inner borders for ... style. Is that possible?</p> <h2> Update 2 </h2> <p>Following <em>JRulle's</em> second proposition :</p> <p><strong>Without collapse</strong></p> <p><img src="https://i.stack.imgur.com/uE1ki.jpg" alt="W/o Collapse"></p> <p>This is an expected result, as my first row are <code>&lt;th&gt;</code>, so the style should not draw borders for them.</p> <p><strong>With Collapse</strong></p> <p><img src="https://i.stack.imgur.com/ViPfj.jpg" alt="enter image description here"></p> <p>This is now really weird, it seems the collate function actually put the inner borders OVER the outside borders...</p>