hteumeuleu / email-bugs

Email quirks and bugs
539 stars 20 forks source link

Outlook app removes `align` attribute on `<table>` elements #111

Open M-J-Robbins opened 2 years ago

M-J-Robbins commented 2 years ago

The align="" attribute is removed from table elements in Outlook app on Android Version 4.2204

Android PWA does not remove the align attribute currently.

iOS app does not remove the align attribute currently Version 4.2207.0

This simple code

<table align="left">
  <tr>
    <td>test1</td>
  </tr>
</table>
<table align="right">
  <tr>
    <td>test2</td>
  </tr>
</table>
<table align="center">
  <tr>
    <td>test3</td>
  </tr>
</table>

Gets converted to this

<table style="border-spacing: 0px; color: rgb(225, 225, 225); font-family: -apple-system, HelveticaNeue; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(20, 20, 20); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
  <tbody>
    <tr>
      <td>test1</td>
    </tr>
  </tbody>
</table>
<table style="border-spacing: 0px; color: rgb(225, 225, 225); font-family: -apple-system, HelveticaNeue; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(20, 20, 20); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
  <tbody>
    <tr>
      <td>test2</td>
    </tr>
  </tbody>
</table>
<table style="border-spacing: 0px; color: rgb(225, 225, 225); font-family: -apple-system, HelveticaNeue; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(20, 20, 20); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; margin-left: auto; margin-right: auto;">
  <tbody>
    <tr>
      <td>test3</td>
    </tr>
  </tbody>
</table>

If you need to work around this you can use a float:left or float:right style.

missginski commented 2 years ago

Worked like a charm. This was extremely helpful, thanks