table borders in Outlook

Resolved

(@efishinsea)

Can you please do something about the borders in your tables in Outlook?

these are hardcoded into the HTML and should be removed explicitly. Setting them to “none” with your builder tool does nothing, nor does trying to override them with CSS.

Here is a corrected version that would work which you can use to replace in your templates:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--[if mso]>
<style type="text/css">
table, td, th {
  border: none !important;
  border-collapse: collapse !important;
}
</style>
<![endif]-->

<style>
table {
  border-collapse: collapse !important;
}
</style>

</head>

<body bgcolor="#dbdbdb" style="margin:0; padding:0; background:#dbdbdb;">

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#f9f9f9" style="border-collapse:collapse;">
<tr>
<td>

<!-- CONTAINER -->
<table width="100%" align="center" style="max-width:605px; margin:auto; border-collapse:collapse;">

<!-- LOGO -->
<tr>
<td bgcolor="#ffffff" style="padding:5px 0; text-align:center;">
<a href="https://soussalt.com/">
<img src="https://soussalt.com/wp-content/uploads/2017/08/SousSalt_email_logo2.png" width="564" style="display:block; max-width:100%; border:none;">
</a>
</td>
</tr>

<!-- HEADER -->
<tr>
<td bgcolor="#873EFF" style="padding:40px 50px;">
<h1 style="margin:0; color:#ffffff; font-family:Arial, sans-serif; font-weight:300; font-size:30px;">
New order: #1
</h1>
</td>
</tr>

<!-- TEXT -->
<tr>
<td bgcolor="#ffffff" style="padding:15px 50px; font-family:Arial, sans-serif; color:#636363; font-size:14px;">
You’ve received the following order from John Doe:
</td>
</tr>

<!-- ORDER TABLE -->
<tr>
<td bgcolor="#ffffff" style="padding:15px 50px;">

<div style="color:#873EFF; font-family:Arial, sans-serif; font-size:20px; margin-bottom:10px;">
Order #1 (April 16, 2026)
</div>

<table width="100%" cellpadding="6" cellspacing="0"
style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0;">

<thead>
<tr>
<th align="left" style="font-family:Arial; font-size:14px; padding:8px 0;">Product</th>
<th align="center" style="font-family:Arial; font-size:14px;">Quantity</th>
<th align="right" style="font-family:Arial; font-size:14px;">Price</th>
</tr>
</thead>

<tbody>
<tr>
<td style="padding:8px 0;">Happy YayCommerce (#sku)</td>
<td align="center">2</td>
<td align="right">$18.00</td>
</tr>
</tbody>

<tfoot>
<tr>
<td colspan="2" style="padding-top:10px;">Subtotal:</td>
<td align="right">$18.00</td>
</tr>
<tr>
<td colspan="2">Shipping:</td>
<td align="right">Free shipping</td>
</tr>
<tr>
<td colspan="2">Payment method:</td>
<td align="right">Direct bank transfer</td>
</tr>
<tr>
<td colspan="2"><strong>Total:</strong></td>
<td align="right"><strong>$18.00</strong></td>
</tr>
</tfoot>

</table>

</td>
</tr>

<!-- ADDRESSES -->
<tr>
<td bgcolor="#ffffff" style="padding:15px 50px;">

<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>

<td width="50%" valign="top" style="font-family:Arial; font-size:14px; color:#636363; padding-right:10px;">
<div style="color:#873EFF; font-size:18px; margin-bottom:8px;"><strong>Billing Address</strong></div>
John Doe<br>
YayCommerce<br>
7400 Edwards Rd<br>
Edwards Rd<br>
(910) 529-1147
</td>

<td width="50%" valign="top" style="font-family:Arial; font-size:14px; color:#636363;">
<div style="color:#873EFF; font-size:18px; margin-bottom:8px;"><strong>Shipping Address</strong></div>
John Doe<br>
YayCommerce<br>
755 E North Grove Rd<br>
Mayville, Michigan<br>
(910) 529-1147
</td>

</tr>
</table>

</td>
</tr>

<!-- FOOTER TEXT -->
<tr>
<td bgcolor="#ffffff" style="padding:0 50px 30px; font-family:Arial; font-size:14px; color:#636363;">
Congratulations on the sale.
</td>
</tr>

<!-- FOOTER -->
<tr>
<td bgcolor="#ffffff" style="padding:15px 50px; text-align:center; font-family:Arial; font-size:14px; color:#8a8a8a;">
<strong>Thank you for shopping at <a href="https://soussalt.com/" style="color:#8e8e8e;">Sous Salt</a>!</strong>
</td>
</tr>

</table>

</td>
</tr>
</table>

</body>
</html>

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Support Bruce
(@ninjateamwp)

1 month, 3 weeks ago

Hi @efishinsea ,

Thanks for pointing this out.

Let me check with our technical team, and get back to you soon.

Regards.

Plugin Support mialewp
(@mialewp)

1 month, 3 weeks ago

Hello @efishinsea,

Thanks for your patience. Which Outlook version are you using please?

Thread Starter e dev
(@efishinsea)

1 month, 3 weeks ago

I happen to be on Office 365 / Windows.

Plugin Support mialewp
(@mialewp)

1 month, 3 weeks ago

Thanks for your details. We are testing on this and get back to you as soon as possible.

Plugin Support mialewp
(@mialewp)

1 month, 1 week ago

Good day! @efishinsea

We have released a newest version, which resolved the reported issue above. Please update the plugin and test again.

If you have any questions, please let us know.

Many thanks!

Mia

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Tags