4

I'm trying to create a web-mail template with a zebra-striped style that looks the same on different clients. This template comes out from a third party application ( that I cannot control ) that iterates over candidates and the only thing that i can do is, for each candidate, to create a partial, something like this pseudo-code: 

    for(candidate of candidates) {
                <table class="zebra" width="600" border="0" cellspacing="0" cellpadding="0"  align="center" style="border-collapse:collapse">
                <tbody>
                    <tr>
                        <td style="padding-left:28px;">&nbsp;</td>
                        <td class="colored-dome" valign="top"  width="600"  style="text-align: left; font-family:Arial; text-transform:uppercase; color:#ffffff; text-decoration:none; font-size:18px; padding:5px 38px 5px 10px;">
                            <span>^candidate.role^</span>
                        </td>
                        <td style="padding-left:28px;">&nbsp;</td>
                    </tr>
                </tbody>
            </table>
}

As you can see here i'm using a css class:

table.zebra:nth-child(odd) td.colored-dome {
    background-color:#8274b6;
}

table.zebra:nth-child(even) td.colored-dome {
    background-color:#9d9d9d;
}

because I can't use nth-child: selector inline. So I tryed:

<style> tag inside <head> , 
<style> tag inside <body> (as an attempt), 
css file from working remote url,

but none of this solution works on outlook 2010, hotmail, gmail. So my question is: is there a way to create a working web-mail-zebra-striped for those clients? Can we say that these solutions will never work for Hotmail, Gmail or Outlook?

Sten Ka Razin
  • 883
  • 1
  • 10
  • 23

1 Answers1

4

nth-child does not work in Outlook or Gmail and a few other clients.

The solution to ensure this always works is to inline the style you want for those email clients.

gwally
  • 3,349
  • 2
  • 14
  • 28
  • So, in this case it is not possible for me to go on with zebra striped, because , the number of candidates (and tables) changes over time. – Sten Ka Razin Jun 27 '18 at 12:17
  • You can still add a zebra class to your css so that email clients that support nth-child will use it. You have some mechanism for creating tables in the first place. You should have the ability to make a row color different and inline the values. – gwally Jun 27 '18 at 15:56
  • See my alternative solution that gains a bit more ground: https://stackoverflow.com/a/71504580/8942566 – Nathan Sep 15 '22 at 00:00