Skip to main content

Notifications

Power Automate - General Discussion
Answered

HTML table styling for multiple tables - only latest CSS is applied, earlier CSS is overwritten

(0) ShareShare
ReportReport
Posted on by 14

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:

kstiegler_1-1662749469842.png

 

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):

kstiegler_2-1662749611664.png

Has anyone managed to do this successfully in the last 4 years since that other post?

  • kstiegler Profile Picture
    kstiegler 14 on at
    Re: HTML table styling for multiple tables - only latest CSS is applied, earlier CSS is overwritten

    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:

    kstiegler_0-1662756594871.png

    It'll take some work to duplicate that success in my production flow, but I know what needs to be done now. Thanks again!

  • Verified answer
    David- Profile Picture
    David- 1,254 on at
    Re: HTML table styling for multiple tables - only latest CSS is applied, earlier CSS is overwritten

    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.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Microsoft Kickstarter Events…

Register for Microsoft Kickstarter Events…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Announcing Forum Attachment Improvements!

We're excited to announce that attachments for replies in forums and improved…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 145,666

#2
RandyHayes Profile Picture

RandyHayes 76,287

#3
Pstork1 Profile Picture

Pstork1 64,996

Leaderboard