Граница таблицы Outlook 2013 не соблюдается - PullRequest
Новая
       9

Граница таблицы Outlook 2013 не соблюдается

0 голосов
/ 13 сентября 2018

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

1 Ответ

0 голосов
/ 13 сентября 2018

Я не понял, как это исправить, но я могу сказать вам, откуда возникла ваша проблема.В первом блоке CSS у ваших элементов table, th и td есть свойство border: 1px none;Закомментирование этих строк позволяет появиться границе.

...