Expand my Community achievements bar.

Join us for the Adobe Journey Optimizer Community Q&A Coffee Break on 28th February at 8 am PT with Ariel Sultan, Daniel Wright, Josee Haeley and Rohit Basuri.
SOLVED

Full width custom HTML emails

Avatar

Level 1

Hi there,

 

I'm currently working on some custom HTML emails for a client and I want to have access to the full width of the email. On most clients, the mail does what I need it to do,  but Outlook doesn't want to listen. In order for me to have full control, I need the table (class="structure_table") to set its width to 100% instead of NaN. 

Giving the structure an inline width 100% doesnt help, its the table itself that needs the inline correction.

 

Is there a workaround for this? Outlook doesnt do CSS styling so any help would be appreciated.

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Hi @RodneyCpg ,

Yes, Outlook is notorious for not supporting some CSS styles, including setting the width of tables to 100%. However, there are some workarounds you can try -

1. Use nested tables: Instead of setting the width of the main table to 100%, create a nested table inside the main table and set its width to 100%. This way, the nested table will take up the full width of the email, and the main table will adapt to its size.

2. Use the "ms-attributes" hack: Outlook supports some proprietary attributes that you can use to override some CSS styles. You can add the "ms-attributes" attribute to the table and set its value to "width:100%;" to force Outlook to set the width of the table to 100%. 
Note that this hack only works in Outlook and should be used with caution.

3. Use a fixed width: If setting the width of the table to 100% is not critical, you can use a fixed width instead. This way, you can ensure that the email will look the same in all clients. For example:
<table class="structure_table" width="600" border="0" cellspacing="0" cellpadding="0">

In this case, the table will have a fixed width of 600 pixels.

View solution in original post

1 Reply

Avatar

Correct answer by
Employee Advisor

Hi @RodneyCpg ,

Yes, Outlook is notorious for not supporting some CSS styles, including setting the width of tables to 100%. However, there are some workarounds you can try -

1. Use nested tables: Instead of setting the width of the main table to 100%, create a nested table inside the main table and set its width to 100%. This way, the nested table will take up the full width of the email, and the main table will adapt to its size.

2. Use the "ms-attributes" hack: Outlook supports some proprietary attributes that you can use to override some CSS styles. You can add the "ms-attributes" attribute to the table and set its value to "width:100%;" to force Outlook to set the width of the table to 100%. 
Note that this hack only works in Outlook and should be used with caution.

3. Use a fixed width: If setting the width of the table to 100% is not critical, you can use a fixed width instead. This way, you can ensure that the email will look the same in all clients. For example:
<table class="structure_table" width="600" border="0" cellspacing="0" cellpadding="0">

In this case, the table will have a fixed width of 600 pixels.