不尊重Outlook 2013表格边框

时间:2018-09-13 08:13:36

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

在Internet Explorer中,我们取得了预期的结果:

enter image description here

但是在Outlook 2013中,边框已从表格中删除或仅部分显示:

enter image description here

我们似乎无法找到一种方法来弄清楚如何在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>

0 个答案:

没有答案