Answered

email layout with table borders

(0) Share

Report

Posted on by WC-09080204-0

Hi team,

The outlook email on desktop is showing ok without color border for the background and white box. But for the outlook app and mail app on iPhone, the blue border appears. can you see what's wrong with my code below?

Appreciate your insights. Thanks.

<table width='640' cellpadding='0' cellspacing='0' border='0'

style='background:#FFFFFF; border:0; border-radius:10px; mso-table-lspace:0pt; mso-table-rspace:0pt;'>

<tr>

<img src='" & varImage & "'

alt='Brunswick Logo'

width='200' height='22'

style='width:200px; height:22px; display:block;

margin-top:16px;

margin-bottom:16px;' />

</td>

</tr>

<tr>

<div style='font-family:Tenorite, Segoe UI, Arial, sans-serif;

font-size:22px;

font-weight:bold;

color:#0B0384;'>

Travel Approval Request

</div>

</td>

</tr>

<tr>

<p>A new travel request has been submitted for <b>" & Concat(Traveller.SelectedItems, DisplayName, ", ") & "</b>.</p>

<b>Request ID: " & formattedID & If(!IsBlank(Related_ID_I.Text), " (Previous Request ID: " & Related_ID_I.Text & ")", "") & "</b><br>

<b>Next Steps: Please <u><span style='color:#0B0384;'>CLICK the link below</span></u> to approve, reject or raise any questions.</b><br>

<p>

<a href='mailto:" & Requester.Selected.Mail & "?cc=APACTravelRequest@brunswickgroup.com&subject=✅ Approved - Travel Request " & formattedID & "' style='color:#28965A; font-weight:bold;'>✅ Approve |</a>   

<a href='mailto:" & Requester.Selected.Mail & "?cc=APACTravelRequest@brunswickgroup.com&subject=❌ Rejected - Travel Request " & formattedID & "' style='color:#C13421; font-weight:bold;'>❌ Reject |</a>   

<a href='mailto:" & Requester.Selected.Mail & "?cc=APACTravelRequest@brunswickgroup.com&subject=❓ Question - Travel Request " & formattedID & "' style='color:#D69036; font-weight:bold;'>❓ Ask a Question</a>

<style>

table td, table th {

border:1px solid #0B0384;

}

</style>

<tr>

TRAVEL DETAILS

</th>

</tr>

Categories:

Building Power Apps

I have the same question (0)

All responses (3)

Answers (1)

WC-09080204-0 30 on at

Like (0)

Report
Copy link

Link copied!

I have removed the Global CSS block and works fine. thank you.

Was this reply helpful? Yes No
Suggested answer

VASANTH KUMAR BALMADI 4 on at

Like (0)

Report
Copy link

Link copied!

The blue border appears on iPhone because iOS Mail auto-applies link and table focus outlines when tables or links aren’t fully reset inline—remove border='1', avoid <style> tags, and explicitly set border:0; outline:none; -webkit-text-size-adjust:100%; inline on all tables and <a> tags to prevent the blue highlight.

1 people found this reply helpful.

Was this reply helpful? Yes No
Verified answer

MParikh 347 Super User 2025 Season 2 on at

Like (0)

Report
Copy link

Link copied!
The blue border comes from this CSS block.

<style> table td, table th { border: 1px solid #0B0384; } </style>

On iPhone Mail and Outlook iOS, this CSS is applied. The selector targets every table cell in the email, including layout tables. Desktop Outlook usually ignores embedded style blocks, so the issue stays hidden there.

Below are the steps that can solve the issue.

STEP 1. REMOVE THE GLOBAL CSS Delete the entire style block shown above. This prevents borders from being applied to layout tables.

STEP 2.

ADD BORDERS ONLY WHERE NEEDED Apply borders inline, only inside the Travel Details table. Inline styles are the safest option for email clients. Use this pattern.

<table align='center' cellpadding='6' cellspacing='0' border='0' style='width:80%; border-collapse:collapse; font-family:Tenorite, Segoe UI, Arial, sans-serif; font-size:14px; border:2px solid #0B0384;'> <tr> <th colspan='2' style='background-color:#0B0384; color:#FFFFFF; font-size:18px; text-align:left; padding:8px; border:1px solid #0B0384;'> TRAVEL DETAILS </th> </tr> <tr> <td style='border:1px solid #0B0384; padding:6px;'>Label 1</td> <td style='border:1px solid #0B0384; padding:6px;'>Value 1</td> </tr> <tr> <td style='border:1px solid #0B0384; padding:6px;'>Label 2</td> <td style='border:1px solid #0B0384; padding:6px;'>Value 2</td> </tr> </table>

STEP 3.

REMOVE INVALID MARKUP You currently have a table wrapped in a bold tag. <b><table ...></table></b>Tables should not sit inside b tags. Some clients auto-correct this differently and create visual artifacts. Change it to:<table ...></table>Apply font-weight: bold inside td or th styles instead.

STEP 4.

HARDEN THE WHITE CARD TABLE Be explicit so layout tables stay clean.<table width='640' cellpadding='0' cellspacing='0' border='0' style='background:#FFFFFF; border:0; border-radius:10px; border-collapse:separate; border-spacing:0; mso-table-lspace:0pt; mso-table-rspace:0pt;'>

STEP 5.

VERIFY ON TARGET CLIENTS Check the email on:

Desktop Outlook

iPhone Mail app

Outlook app on iPhone

EXPECTED RESULT No blue border around the outer background or white card. Blue borders appear only inside the Travel Details table.

Was this reply helpful? Yes No