Outlook: таблица выровнять левый вопрос - PullRequest
Новая
       36

Outlook: таблица выровнять левый вопрос

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

Так выглядит везде, кроме Outlook:

enter image description here

В Outlook это выглядит так:

enter image description here

Для создания двухколоночного дизайна используются три таблицы, это код: 

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.ReadMsgBody {
  width: 100%;
  background-color: #ffffff;
}

.ExternalClass {
  width: 100%;
  background-color: #ffffff;
}

.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
  line-height: 100%;
}

html { width: 100%; }

body {
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  margin: 0;
  padding: 0;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

table td { border-collapse: collapse; }
.yshortcuts a { border-bottom: none !important; }
img { display: block !important; }

a {
  text-decoration: none;
  color: #e54a39;
}


/* Media Queries */

@media only screen and (max-width: 640px) {
  body { width: auto !important; }
  table[class="table600"] { width: 450px !important; }
  table[class="table-container"] { width: 90% !important; }
  
  table[class="container2-2"] {
    width: 47% !important;
    text-align: left !important;
  }
  
  table[class="full-width"] {
    width: 100% !important;
    text-align: center !important;
  }
  
  img[class="img-full"] {
    width: 100% !important;
    height: auto !important;
  }
}

@media only screen and (max-width: 479px) {
  body { width: auto !important; }
  table[class="table600"] { width: 290px !important; }
  table[class="table-container"] { width: 82% !important; }
  
  table[class="container2-2"] {
    width: 100% !important;
    text-align: left !important;
  }
  
  table[class="full-width"] {
    width: 100% !important;
    text-align: center !important;
  }
  
  img[class="img-full"] { width: 100% !important; }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <title>Test</title>
</head>

<body marginwidth="0" marginheight="0" style="margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" offset="0" topmargin="0" leftmargin="0">

    <!-- PREFOOTER -->
    <table width="100%">
        <tr>
            <td align="center" bgcolor="orange">
                <table class="table600" width="600">
                    <tr>
                        <td>
                            <table class="full-width" width="287" align="left">
                                <tr>
                                    <td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                                        Why do I get this mail?
                                    </td>
                                </tr>
                            </table>

                            <!-- SPACE -->
                            <table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                                <tr>
                                    <td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
                                </tr>
                            </table>
                            <!-- END SPACE -->

                            <table class="full-width" width="287" align="right">
                                <tr>
                                    <td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                                        Contact Us
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!-- END PREFOOTER -->

</body>

</html>

Я уже понял, что проблема вызвана: 

 <!-- SPACE -->
 <table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
      <tr>
           <td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
      </tr>
 </table>
 <!-- END SPACE -->

Но я не понимаю почему. Как заменить проставку, чтобы она работала в Outlook, но оставить место?

1 Ответ

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

Чтобы ответить на ваши вопросы о расстоянии. Просто используйте padding на td, заполнение хорошо поддерживается и будет работать нормально. 

<table class="table600" width="600">
  <tr>
    <td style="padding-bottom: 30px;">

Затем вы также можете настроить это заполнение с помощью класса в медиа-запросе.

Также примечание: вам больше не нужно использовать селекторы атрибутов css для css. Это была старая ошибка, которая была исправлена. Таким образом, вы можете использовать стандартные .class селекторы.

...