I've now resolved this by making the following changes to the flow: -
Compose - Data Operation (Positioned directly below the action to create the HTML Table
replace(body('HTML_Table_for_AC_Systems'),'<table>','<table class=CustomTable>')
Then adjusted the Compose operation which held the CSS to reference the ID of the table (CustomTable) as per below.
<style>
.CustomTable {
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 100%;
text-align: left;
border-collapse: collapse;
}
.CustomTable td, table.CustomTable th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}
.CustomTable tbody td {
font-size: 13px;
}
.CustomTable tr:nth-child(even) {
background: #D0E4F5;
}
.CustomTable thead {
background: #1C6EA4;
background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
border-bottom: 2px solid #444444;
}
.CustomTable thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
.CustomTable thead th:first-child {
border-left: none;
}
.CustomTable tfoot {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background: #D0E4F5;
background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
border-top: 2px solid #444444;
}
.CustomTable tfoot td {
font-size: 14px;
}
.CustomTable tfoot .links {
text-align: right;
}
.CustomTable tfoot .links a{
display: inline-block;
background: #1C6EA4;
color: #FFFFFF;
padding: 2px 8px;
border-radius: 5px;
}
</style>
Hope this helps anyone who has experienced the same issue
