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.
Solved! Go to Solution.
Views
Replies
Total Likes
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.
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.
Views
Likes
Replies