Full width custom HTML emails | Community
Skip to main content
R
RodneyCpg
February 21, 2023
Solved

Full width custom HTML emails

  • February 21, 2023
  • 1 reply
  • 5663 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by akshaaga

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.

1 reply

akshaaga
Adobe Employee
akshaagaAdobe EmployeeAccepted solution
Adobe Employee
March 3, 2023

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.

    Terms & ConditionsAccessibility statement

    Loading footer...