CODEWITHSUNDEEP
cssvb.netemailoutlook-2007
Sifu
Sifu

Reputation: 1082

<style> not working as intended for <table> on Outlook 2007

Problematic

< style> tags don't seem to work properly in an Email sent to Outlook 2007.

Context

I use an asp.net server to send an Email with a table. This table has the inputs that the client entered.

What it should do

Table (From JSFiddle)
PrintScreened from JSFiddle

What it does

Table (From Outlook 2007)
PrintScreened from Outlook 2007 message.

Stipulations

The VB code doesn't matter (as it sends the Email properly), the problem comes from the mailMessage.body text.

Here is the code for it :

Dim table As String
Dim mailMessage As New MailMessage()

'There are two multiline textboxes which I want to create a table from
table = "<table><thead><tr><th>Length</th><th>Force</th></tr></thead><tbody>"
For i = 0 To UBound(Split(length.Text, Environment.NewLine))
    table += "<tr><td>" & Split(length.Text, Environment.NewLine)(i) & "</td>"
    table += "<td>" & Split(force.Text, Environment.NewLine)(i) & "</td></tr>"
Next
table += "</tbody></table>"

mailMessage.Body = table & _
"<style>" & vbCrLf & _
"table {display: inline-table; border:3px solid; border-collapse:collapse;}" & vbCrLf & _
"thead {border:2px solid;}" & vbCrLf & _
"tbody {border:1px solid;}" & vbCrLf & _
"th {border:1px solid; padding:3px;}" & vbCrLf & _
"td {font-size:90%; border:1px solid; padding:3px; text-align:left;}" & vbCrLf & _
"</style>"

This should translate into this, but something goes wrong in the process.

From https://www.campaignmonitor.com/css/, all the style commands I used should work..

Question

What have I done wrong?

Update 1

I tried to put the <style> tags in front of the table, it did this :

<style>[...]</style>
<table>[...]</table>

Style in front

It seems like the last CSS command overwrites all of the previous ones (table 3px border gets overwritten by td...)

I tried JRulle proposition, it gave this :

JRulle's proposition

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?

Update 2

Following JRulle's second proposition :

Without collapse

W/o Collapse

This is an expected result, as my first row are <th>, so the style should not draw borders for them.

With Collapse

enter image description here

This is now really weird, it seems the collate function actually put the inner borders OVER the outside borders...

Upvotes: 2

Views: 1317

Answers (3)

Sifu
Sifu

Reputation: 1082

The only way that I could properly draw the border of the table was by hardcoding every border with border-left border-bottom etc.

The code at the end (using inline style) is this :

table = "<table style=""border: 3px solid; border-collapse: collapse; padding: 3px;"">" & _ 
    "<thead><tr><th style=""border-right: 1px solid;"">Length</th><th>Force</th></tr></thead><tbody>"
For i = 0 To UBound(Split(length.Text, Environment.NewLine))
    If i = 0 Then
        borderTop = "2px"
    Else 'i > 0 then
        borderTop = "1px"
    End If
    table += "<tr><td style=""border-right: 1px solid; border-top: " & borderTop & _ 
        " solid;"">" & Split(length.Text, Environment.NewLine)(i) & "</td>"
    table += "<td style=""border-top: " & borderTop & " solid;"">" & _ 
        Split(force.Text, Environment.NewLine)(i) & "</td></tr>"
Next
table += "</tbody></table>"

mailMessage.Body = table

Upvotes: 1

JRulle
JRulle

Reputation: 7568

The errors are are showing are with your table borders, so try one of these solutions:

One: Set Border values as inline TD attributes like so:

<table border="1">

Two: Set border css properties separately:

border-width: 1px;
border-color: black;
border-style: solid;

*I dont have access to Outlook 2007 to test these for you... sorry

Update 1:

Adjusted styles based on your feedback:

table { 
  border-width: 3px; 
  border-color: black; 
  border-style: solid; 
  border-collapse: collapse; 
}
td { 
  border-width: 1px; 
  border-color: black; 
  border-style: solid; 
}

*basically, you need to set the borders differently for the different tags then also collapse the borders (use this in tandem with attribute border="1")

Upvotes: 1

James Martin-Davies
James Martin-Davies

Reputation: 651

You can't use style tags in emails. You can only use inline styling which means hardcoding the styles directly in to the HTML. Unfortunately, this is still the case these days!

Read more here.

Upvotes: 0

Related Questions