Yahoo mail app specific : how to turn table cell in blocks with CSS

Vote count:

0

I've done an html email responsive template but I face a problem with yahoo mail app (I've tested on iphone only, i don't know if the android app presents the same issue). To simplify my question, i won't enter in the details of the responsive part and keep it to the mobile design. One thing i want to do is turn a table with three cells, that are next to each other in their natural display, into three blocks on top of each other using CSS style. So i added some style="display: block;" to the elements, and it works fine in all mail clients, except on yahoo mail iphone app, which seems to ignore this directive. I've tried to put it as inline style, to use !important, but without any success. anyone has ideas if there is a way to make yahoo mail app display my cells as regular blocks without having to remove the table structure ?

thank you in advance !

here is the piece of code for the table with the three cells (2 content cells and one margin between them)

<!-- // 2 BLOCKS AND A SPACE DIVISION \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="display: block !important;">
  <tr style="display: block !important;">
    <td width="47%" style="display: block !important;">
      first content
    </td>
    <td width="6%" style="display: block !important;">
    </td>
    <td width="47%" style="display: block !important;">
      second content
    </td>
  </tr>
</table><!-- // END 2 BLOCKS AND A SPACE DIVISION \\ -->

asked 3 mins ago

Developpeur2000

1

Yahoo mail app specific : how to turn table cell in blocks with CSS