I am working on an HTML email and encountering a strange issue. When I view the email in Chrome with responsive mode enabled, there is a faint border on some of the cells. I cannot identify the cause as none of the cells have borders, and the issue only appears when the screen size is set to full width. Tests conducted using Email on Acid show the issue on iPhone tests. Can anyone help diagnose the problem and suggest a solution? https://i.sstatic.net/BP817.png
The issue is not present in CodePen; it's simply being used to share the HTML code: https://codepen.io/jmona789/pen/ZELjrOv
Relevant snippet of HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="telephone=no" name="format-detection">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<title>Test</title>
<style type="text/css">
/* Some resets and issue fixes */
#outlook a {
padding: 0;
}
...