Mailchimp different background colors for repeatable

Question

I'm having trouble figuring out how to set up a mailchimp template with a repeatable table which background colors can be changed individually.

Currently I have this

....

/*
@tab Main Event
@section Header
@tip Set background and text color for main Event
*/
.heading{
  /*@editable*/background-color:#000000;
  /*@editable*/color:#ffffff;
}

....

<table border="0" class="heading padding-20" mc:repeatable>
  <tr>
    <td align="Left" valign="top" width="70%">
      <img src="http://placehold.it/200x40" mc:edit="logo">
    </td>
    <td align="right" valign="top">
      <a href="*|ARCHIVE|*" class="view-in-browser" mc:editable>view in browser</a>
    </td>
  </tr>
</table>

As a result I can duplicate the repeatable table in the campaign editor. But when I change the background color in the design panel then the background colors of all the tables change, what is not what I want. I understand that logically changing the background color in the design panel (which is linked to the css for the class .heading) will affect all elements having the class .heading. But I can't find and/or figure out how to solve this problem.

What I want is that I can change the background color of an individual "duplicate" of the table.

e.g.

• Table 1 (duplicate) has background-color blue
• Table 2 (duplicate) has background-color green
• ...

Is this even possible?

Thanks for the patience for reading and helping!

Answer 1

Instead of targeting all tables by using

.heading {
  background-color:#000000;
}

You can use the nth-child element to target those specific tables according to the order in which they appear.

.heading:nth-child(1) {
    background: orange;
}

.heading:nth-child(2) {
    background: red;
}

You can read more about it here.