Expand my Community achievements bar.

Dive in, experiment, and see how our AI Assistant Content Accelerator can transform your workflows with personalized, efficient content solutions through our newly designed playground experience.
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.