CODEWITHSUNDEEP
csshtml-tablehtml-emailborder-layout
DarkLite1
DarkLite1

Reputation: 14705

Outlook 2013 table border not respected

In Internet Explorer we achieved the desired result:

enter image description here

But in Outlook 2013 the border is removed from the table or only partially shown:

enter image description here

We can't seem to find a way to figure out how to get the same look in Outlook as it is in Internet Explorer. One caveat is, the CSS is split in two parts, the first part cannot be altered only the second part. Because the first part is a default we use in other e-mail templates working with PowerShell.

The code:

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        body {
            font-family: verdana;
            background-color: white;
        }

        p {
            font-size: 14px;
            margin-left: 10px;
        }

        table {
            font-size: 14px;
            border-collapse: collapse;
            border: 1px none;
            padding: 3px;
            text-align: left;
            padding-right: 10px;
            margin-left: 10px;
        }

        td,
        th {
            font-size: 14px;
            border-collapse: collapse;
            border: 1px none;
            padding: 3px;
            text-align: left;
            padding-right: 10px
        }
    </style>
</head>

<body>
    <p>Details per matrix file:</p>
    <style>

        #matrixTable {
            border: 1px solid Black;
            border-collapse: separate;
            border-spacing: 0px 0.6em;
            max-width: 97%;
            min-width: 600px;
            padding: 10px;
        }

        #matrixTitle {
            border: none;
            background-color: lightgrey;
            text-align: center;
            padding: 6px;
        }

        #matrixHeader {
            font-weight: normal;
            letter-spacing: 5pt;
            font-style: italic;
        }

        #matrixFileInfo {
            font-weight: normal;
            font-size: 12px;
            font-style: italic;
            text-align: center;
        }

        #LegendTable {
            border-collapse: collapse;
            border: 1px solid Black;
            table-layout: fixed;
            width: 600px;
        }

        #LegendTable td {
            text-align: center;
        }

        #probTitle {
            font-weight: bold;
        }

        #probTypeWarning {
            background-color: orange;
        }

        #probTypeError {
            background-color: red;
        }

        #probTypeInfo {
            background-color: lightgrey;
        }
    </style>
    <table id="matrixTable">
        <tr>
            <th id="matrixTitle" colspan="8"><a href="\\location\file.xlsx">BEL MTX-CEM-CBR Antoing.xlsx</a></th>
        </tr>
        <tr>
            <th id="matrixFileInfo" colspan="8">Last change: Gijbels, Brecht (Braine L’Alleud) BEL @ 12/09/2018 13:56:03</th>
        </tr>


        <th id="matrixHeader" colspan="8">Settings</th>
        <tr>
            <td></td>
            <td>ID</td>
            <td>ComputerName</td>
            <td>Path</td>
            <td>Action</td>
            <td>Duration</td>
        </tr>
        <tr>
            <td id="probTypeWarning"></td>
            <td><a href="\\somewhere\ID 1 - Settings.html">1</a></td>
            <td><a href="\\somewhere\ID 1 - Settings.html">BELSFANTO0128.GROUPHC.NET</a></td>
            <td><a href="\\somewhere\ID 1 - Settings.html">E:\DEPARTMENTS_NEW</a></td>
            <td><a href="\\somewhere\ID 1 - Settings.html">Check</a></td>
            <td><a href="\\somewhere\ID 1 - Settings.html">00:00:01</a></td>
        </tr>
    </table>
    <br><br>
    <table id="LegendTable">
        <tr>
            <td id="probTypeError" style="border-collapse: collapse; border: 1px solid Black;width: 200px;">Error</td>
            <td id="probTypeWarning" style="border-collapse: collapse; border: 1px solid Black;width: 200px;">Warning</td>
            <td id="probTypeInfo" style="border-collapse: collapse; border: 1px solid Black;width: 200px;">Information</td>
        </tr>
    </table>
</body>

</html>

Upvotes: 0

Views: 1887

Answers (1)

K K
K K

Reputation: 197

I haven't figured out how to fix it, but I can tell you where your problem is coming from. In the first block of CSS, your table, th, and td elements have the property "border: 1px none;", which negates your border styling. Commenting out those lines allows the border to appear.

Upvotes: 1

Related Questions