I'm trying to style 2 HTML tables differently but nothing I've tried is working. Here's a screenshot of my super basic testing flow:
And here is the entire contents of the "Create 2 HTML tables styled differently" step:
<style>
#services table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
#signature table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
</style>
<div id="services" class="output">
<table>
<thead>
<tr>
<th>table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>table contents</td>
</tr>
</tbody>
</table>
</div>
<br>
<div id="signature" class="output">
<table>
<thead>
<tr>
<th>table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>table contents</td>
</tr>
</tbody>
</table>
</div>
I found this post on the topic, but it doesn't matter if I try "#services" or ".services", the CSS applied to both tables is only the second CSS code (the "#signature" section above):
Has anyone managed to do this successfully in the last 4 years since that other post?
THANK YOU! Using the CSS Inliner tool linked in your linked guide, I've managed to at least make my test flow format the two tables differently:
It'll take some work to duplicate that success in my production flow, but I know what needs to be done now. Thanks again!
I am almost positive that what is happening is that the e-mail is stripping out the class information, which is why only one set of CSS ends up being used. Based on your screen shot of the output, this seems to be the case since your red borders are in your second class.
Coding HTML e-mail is still in the dark ages and works best with in-line styles and tables. This is a good post for tips on formatting HTML e-mails: Guide to HTML Email: Coding Templates From Scratch | Campaign Monitor. The last company I worked for we sent out e-mail campaigns, and it is truly an art to get this right so it displays correctly in all e-mail clients.