Using CSS { white-space: nowrap } with Outlook

Question

I currently have a report with lots of wide columns that I am emailing directly out of SQL. I am generating the HTML for it dynamically but have come across an issue with column widths.

I have inserted the following CSS:

#tableMain 
TH { 
    text-align: center; 
    white-space: pre; 
    border: 1px solid black; 
    padding: 0; 
    border-spacing: 0; 
    border-collapse: collapse; 
    background-color: #f0f0f0; 
    font: 11pt bold arial sans-serif; 
} 

Now while the html generated this renders fine in IE, it insists on wrapping the cell contents onto two rows in Outlook.

In Internet explorer:

In Outlook

Outlook is our company wide email client so I don't need to support multiple clients, but I do need it to work nicely here.

And suggestions gratefully received.

Solution

That fact is that Outlook uses Word (not IE) for rendering HTML markup of emails. All supported and unsupported HTML elements, attributes, and cascading style sheets properties you may find described in the following articles in MSDN:

• Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
• Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

Comments

[Matthew Baker]

Thanks Eugene, I'll have a look at this. I think I'm hitting a maximum screen width as things display nicely if I have fewer columns. I'll have a look over the links you've posted later, I've been pulled onto a different project short term. Cheers.

[michelem]

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation.

[Artjom B.]

@Michelem I fail to see how this answer is supposed to be a comment. It's a perfectly good answer with a little esoteric idea of solving the issue.

[undrline - Reinstate Monica]

With an appreciation for the rtfm answer, only the first link has documentation about nowrap. And, I have found Outlook does not respect the td attribute or the div attribute, despite being listed there. So, this answer is not correct.