不遵守 Outlook 2013 表格边框答案

【问题标题】：Outlook 2013 table border not respected不遵守 Outlook 2013 表格边框
【发布时间】：2019-02-17 22:22:44
【问题描述】：

在 Internet Explorer 中我们达到了预期的效果：

但在 Outlook 2013 中，边框已从表格中移除或仅部分显示：

我们似乎无法找到一种方法来弄清楚如何在 Outlook 中获得与在 Internet Explorer 中相同的外观。需要注意的是，CSS 分为两部分，第一部分不能只更改第二部分。因为第一部分是我们在其他使用 PowerShell 的电子邮件模板中使用的默认值。

代码：

<!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>

【问题讨论】：

对表格边框使用内联样式，就像在“LegendTable”中所做的那样。通过 style="" 或使用border="1" 直接设置边框
好像不行，我试过<table style="border: 1px solid Black;border-collapse: separate;border-spacing: 0px 0.6em; border:black">

标签： css html-table html-email border-layout

【解决方案1】：

我还没有弄清楚如何解决它，但我可以告诉你问题出在哪里。在 CSS 的第一个块中，您的 table、th 和 td 元素具有属性“border: 1px none;”，它否定了您的边框样式。注释掉这些行允许出现边框。

【讨论】：

确实，这似乎可以解决问题。现在我只需要弄清楚如何在不修改 CSS 的第一块的情况下做到这一点。感谢您为我指明了正确的方向。