Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Outlook mobile] border property on table/td/th doesn't honor border-radius #98

Open
husseinalhammad opened this issue Aug 15, 2021 · 4 comments
Open

[Outlook mobile] border property on table/td/th doesn't honor border-radius #98

husseinalhammad opened this issue Aug 15, 2021 · 4 comments
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com

Comments

@husseinalhammad
Copy link

On Outlook mobile apps (iOS 14 and Android), it seems the border CSS property does not honor border-radius when used on <table>, <td> or <th> elements. Neither property is removed. border-radius still works.

Full HTML test 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body style="padding:20px; text-align:center; background-color:#cccccc;">
  
  <div style="border-radius:20px; border:1px solid #000; padding:20px; background-color:#ffffff; margin-bottom:40px;">
    <p>div</p>
  </div>

  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-spacing:0; border-radius:20px; border:1px solid #000; padding:20px; background-color:#ffffff; margin-bottom:40px;">
    <tr>
      <td style="text-align:center;">
        <p>table</p>
      </td>
    </tr>
  </table>

  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-spacing:0; margin-bottom:40px;">
    <tr>
      <td style="text-align:center; border-radius:20px; border:1px solid #000; padding:20px; background-color:#ffffff;">
        <p>td</p>
      </td>
    </tr>
  </table>

  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border-spacing:0;">
    <tr>
      <th style="text-align:center; border-radius:20px; border:1px solid #000; padding:20px; background-color:#ffffff;">
        <p>th</p>
      </th>
    </tr>
  </table>
</body>
</html>
HTML from Outlook Android v4.2129.1: 
<div style="color: rgb(33, 33, 33); 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: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; border-radius: 20px; border: 1px solid rgb(0, 0, 0); padding: 20px; background-color: rgb(255, 255, 255); margin-bottom: 40px;">
  <p>div</p>
</div>

<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; color: rgb(33, 33, 33); 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: center; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; border-radius: 20px; border: 1px solid rgb(0, 0, 0); padding: 20px; background-color: rgb(255, 255, 255); margin-bottom: 40px;">
  <tbody>
    <tr>
      <td style="text-align: center;">
        <p>table</p>
      </td>
    </tr>
  </tbody>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; color: rgb(33, 33, 33); 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: center; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
  <tbody>
    <tr>
      <td style="text-align: center; border-radius: 20px; border: 1px solid rgb(0, 0, 0); padding: 20px; background-color: rgb(255, 255, 255); margin-bottom: 40px;">
        <p>td</p>
      </td>
    </tr>
  </tbody>
</table>
Screenshot

border-Outlook
@JayOram
Copy link

JayOram commented Aug 16, 2021

This is occurring due to Outlook adding border-collapse: collapse to all the tables.

As described in the MDN docs:

The border-radius property does not apply to table elements when border-collapse is collapse.

Just tried adding border-collapse: none and border-collapse: none!important; inline but had not effect.

Adding border-collapse: inherit; inline or add table {border-collapse: inherit;} to the head at least fixes it in Android.

Test code here: https://useparcel.com/e/579e8c05-55d3-45a7-b8d4-ae0c94358fc9

@husseinalhammad
Copy link
Author

Good catch, @JayOram. I did not notice the addition of border-collapse: collapse

@hteumeuleu hteumeuleu added the Outlook Windows, macOS, iOS, Android and Outlook.com label Feb 16, 2022
@nathankeenmelb
Copy link

Curiously I didn't see this on Outlook Android (although I tested on Android 11), but fixed it for Outlook iOS 14.2 by adding border-collapse: separate to the table inline.

@husseinalhammad
Copy link
Author

I don't see this happening any more

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@hteumeuleu @husseinalhammad @JayOram @nathankeenmelb