Невозможно переопределить свойство отображения в электронной почте HTML - PullRequest
Новая
       15

Невозможно переопределить свойство отображения в электронной почте HTML

0 голосов
/ 17 мая 2019

У меня есть довольно простой HTML-шаблон, который также отзывчив.Он работает в основном так, как ожидалось, за исключением случаев, когда он реагирует, я делаю 'td' полной шириной, используя класс следующим образом: 

@media only screen and (max-width: 480px){
            .templateColumnContainer{
                display:block !important;
                width:100% !important;
            }   
        }

Это работает, как и ожидалось, когда я тестирую в веб-браузерах даже в режиме устройстваиспользуя devtools, но на реальном устройстве оно просто не переопределит стандартное свойство отображения 'table-cell' даже при использовании флага! Important.Я приложил скриншот, чтобы показать поведение.Я сталкивался с известной ошибкой или есть очевидное решение, которое мне не хватает?

enter image description here

1 Ответ

2 голосов
/ 18 мая 2019

Android представила ошибку еще в 2015 году , когда данные таблицы стека td больше не могли быть наращиваемыми. В качестве обхода вы можете использовать заголовок таблицы th, чтобы сделать наложение, но обязательно используйте font-style как обычно на th, или шрифты выделены жирным шрифтом (может иметь каскадный эффект, если ваш встроенный CSS где-то испорчен).

Рабочий пример: 

@media only screen and (max-width: 480px){
    .colms th{
        display:block !important;
        width:100% !important;
    }   
}
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="colms">
  <tbody>
    <tr>
      <th style="font-weight:normal;margin:0px;padding:0px;">Column 1</th>
      <th style="font-weight:normal;margin:0px;padding:0px;">Column 2</th>
    </tr>
  </tbody>
</table>

Примечание: Я добавил несколько стилей к th, только если есть почтовые клиенты, которые пытаются задать поля или отступы. Вес шрифта был установлен на нормальное значение, поэтому он соответствует другому тексту вокруг него. Вы можете изменить его, если он предназначен для жирного шрифта.

...