web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Welcome to the Power Platform Communities
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / email layout with tabl...
Power Apps
Answered

email layout with table borders

(0) ShareShare
ReportReport
Posted on by WingC 44
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.
 
<!-- OUTER BACKGROUND -->
<table width='100%' border='0' cellpadding='0' cellspacing='0' style='background:#F6F6EF; border:0;'>
<tr><td align='center' style='padding:20px 12px;'>
    <!-- WHITE CARD -->
   
    <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;'>
 
        <!-- CENTERED LOGO -->
        <tr>
            <td align='center' style='padding:20px 20px 10px;'>
                <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>
 
        <!-- CENTERED TITLE -->
        <tr>
            <td align='center' style='padding-top:12px; padding-bottom:20px;'>
                <div style='font-family:Tenorite, Segoe UI, Arial, sans-serif;
                            font-size:22px;
                            font-weight:bold;
                            color:#0B0384;'>
                    Travel Approval Request
                </div>
            </td>
        </tr>
 
        <!-- LEFT-ALIGNED MAIN CONTENT -->
        <tr>
            <td align='left' style='padding:0 20px;'>
 
   
    <div style='font-family:Tenorite, sans-serif; padding:16px;'>
 
    <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>&nbsp;&nbsp;&nbsp;
    <a href='mailto:" & Requester.Selected.Mail & "?cc=APACTravelRequest@brunswickgroup.com&subject=❌ Rejected - Travel Request " & formattedID & "' style='color:#C13421; font-weight:bold;'>❌ Reject |</a>&nbsp;&nbsp;&nbsp;
    <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>
    <br><br></p>
   
    <b><table border='1' align='center' cellpadding='6' style='width:80%;border-collapse:collapse; font-family:Tenorite, sans-serif; font-size:14px; margin-left:20px; border:2px solid #0B0384;'>
 
    <!-- Apply inner borders globally -->
    <style>
        table td, table th {
            border:1px solid #0B0384;
        }
    </style>
 
    <tr>
        <th colspan='2' style='background-color:#0B0384; color:white; font-size:18px; text-align:left; padding:8px;'>
            TRAVEL DETAILS
        </th>
    </tr>
Categories:
Building Power Apps
I have the same question (0)
  • Verified answer
    MParikh Profile Picture
    MParikh 521 Super User 2026 Season 1 on at
    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:
    1. Desktop Outlook
    2. iPhone Mail app
    3. 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.
  • Suggested answer
    VASANTH KUMAR BALMADI Profile Picture
    VASANTH KUMAR BALMADI 322 on at
    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.
  • WingC Profile Picture
    WingC 44 on at
    I have removed the Global CSS block and works fine.  thank you.
  • WingC Profile Picture
    WingC 44 on at
    Hi,
     
    I have slightly new question.. How can I ensure the 1st column for my main table looks proportionally nice?  It's fine for desktop, but not on iPhone again. 
     
    Please shred me some light.  Thank you.
     
    ________________
     
     
    <!-- OUTER BACKGROUND -->
    <table width='100%' border='0' cellpadding='0' cellspacing='0' style='background:#F6F6EF; border:0;'>
    <tr><td align='center' style='padding:20px 12px;'>
        <!-- WHITE CARD -->
       
        <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;'>
     
            <!-- CENTERED LOGO -->
            <tr>
                <td align='center' style='padding:20px 20px 10px;'>
                    <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>
     
            <!-- CENTERED TITLE -->
            <tr>
                <td align='center' style='padding-top:12px; padding-bottom:20px;'>
                    <div style='font-family:Tenorite, Segoe UI, Arial, sans-serif;
                                font-size:22px;
                                font-weight:bold;
                                color:#0B0384;'>
                        Travel Approval Request
                    </div>
                </td>
            </tr>
     
            <!-- LEFT-ALIGNED MAIN CONTENT -->
            <tr>
                <td align='left' style='padding:0 20px;'>
     
       
        <div style='font-family:Tenorite, sans-serif; padding:16px;'>
     
        <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>&nbsp;&nbsp;&nbsp;
        <a href='mailto:" & Requester.Selected.Mail & "?cc=APACTravelRequest@brunswickgroup.com&subject=❌ Rejected - Travel Request " & formattedID & "' style='color:#C13421; font-weight:bold;'>❌ Reject |</a>&nbsp;&nbsp;&nbsp;
        <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>
        <br><br></p>
       
        <b><table border='1' align='center' cellpadding='6' style='width:80%; max-width:550px; border-collapse:collapse; font-family:Tenorite, sans-serif; font-size:14px; border:2px solid #0B0384;table-layout:fixed; word-break:break-word;'>
     
        <tr>
            <th colspan='2' style='background-color:#0B0384; color:white; font-size:18px; text-align:left; padding:8px;'>
                TRAVEL DETAILS
            </th>
        </tr>
     
        <tr><td width ='110' style='width:20%; min-width:110px;'>Date Submitted</td><td>" & Text(Submit_On_P.SelectedDate, "ddd, dd mmm yyyy") & "</td></tr>
        <tr><td width ='110' style='width:20%; min-width:110px;'>Traveller</td><td>" & Concat(Traveller.SelectedItems, DisplayName, ", ") & "</td></tr>

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities

Quick Links

Season of Sharing Community Challenge Launch!

Jump in, show your community spirit, and win prizes!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the May Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
Valantis Profile Picture

Valantis 424

#2
WarrenBelz Profile Picture

WarrenBelz 355 Most Valuable Professional

#3
11manish Profile Picture

11manish 290

Last 30 days Overall leaderboard

Featured topics

Auto-Populate field Power Pages
Gallery Tabs - Show or Hide Tabs based on Field Value
How to patch multiple records at once
Enable Copilot for end users in model-driven apps
Question for everyone : How are you using Create Text GPT in AI Builder?
Community content - sample components, blogs etc. - Link to this page (http://aka.ms/PCFdemos)
Welcome to the Power Apps forum!

Product updates

Microsoft Power Platform Community release plans