ТД не суммируется с Outlook

Question

У меня есть HTML электронное письмо со стандартным TD рядом. Однако на мобильном я хочу, чтобы они складывались. Я использовал дисплей: блок; это работает в некоторых почтовых браузерах, однако в других (Outlook) это не работает.

HTML выглядит следующим образом: -

@media screen and (max-width: 800px) { 
  .res-block td {display: block !important;}
}

<table class="main" width="700" align="center" cellpadding="0" cellspacing="0" border="0" style="background: #fff;margin:auto !important">
  <tbody>
    <tr class="res-block">
      <td style="background: #ff9400;">hello</td>
      <td style="background: #ff9400;">john</td>    
    </tr>  
  </tbody>

Может кто-нибудь помочь, пожалуйста?

Спасибо!

Answer 1

Я нашел это! Просто измените значение td на th, и тогда оно будет корректно складываться на мобильном телефоне Outlook.

Отличный хак, если его кто-то ищет!

Answer 2

попробуйте использовать box-sizing:border-box с clear:both , проверьте фрагмент:

@media screen and (max-width: 800px) { 
  td {
    display:block; 
    box-sizing:border-box; 
    clear:both;
  }
}

<table class="main" width="700" align="center" cellpadding="0" cellspacing="0" border="0" style="background: #fff;margin:auto !important">
  <tbody>
    <tr class="res-block">
      <td style="background: #ff9400;">hello</td>
      <td style="background: #ff9400;">john</td>    
    </tr>  
  </tbody>