OK so i am using Active campign to run my marketing for my website and i am designing my emails using custom HTML.
What i want is simply when no data is recieved fir the table row in any of my 3 columns then to not show that row.
When i build this in visual studio code it works perfectly when i send to live server as shown.
Table working in live server no first row collapsed as no data
Now when i paste this same HTML code into active campaign it shows like this
Table not collapsing row one as you can see it has the double thick line at top
Whats strange that when i see the preview in active campaign i see the SCRIPT code as regular text at the top see here. So the code is not running.
See at top you can see the text of the script so its not running as script
Here is my code if anyone can help id appriecate it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/line-awesome/css/line-awesome.min.css" integrity="sha512-vebUliqxrVkBy3gucMhClmyQP9On/HAWQdKDXRaAlb/FKuTbxkjPKUyqVOxAcGwFDka79eTF+YXwfke1h3/wfg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>HTML Email Signature</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#mealplantable tr td").each(function()
{
var emptyrows=$.trim($(this).text());
if(emptyrows.length==0)
{
$(this).parent().hide();
}
});
});
</script>
<style type="text/css">
table.mealplantable th {
text-align: center;
border-collapse: collapse;
border: 1px solid #000;
font-family: 'Roboto', serif, sans-serif, Arial, Helvetica;
padding: 0;
font-weight: 700;
font-size: 15px;
}
table.mealplantable tr {
font-family: 'Roboto', sans-serif;
padding: 0;
font-weight: 700;
font-size: 15px;
}
table.mealplantable td {
text-align: center;
border-collapse: collapse;
border: 1px solid #000;
font-family: 'Roboto', serif, sans-serif, Arial, Helvetica;
padding: 0;
font-weight: 400;
font-size: 15px;
}
.mealplantable {
border: 1px solid #000;
padding-top: 0;
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
margin: 0 auto;
width: 99%;
max-width: 600px;
border-spacing: 0;
font-family:'Roboto', serif, sans-serif, Arial, Helvetica;
color: #000;
margin-top: 10px;
margin-bottom: 10px;
}
table {
border-spacing: 0;
}
td {
padding: 0;
}
img {
border: 0;
border-width:0;
}
a {
color: #000000;
text-decoration: none;
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
</head>
<body style="Margin:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;min-width:100%;background-color:#dde0e1;">
<table align="center" width="100%" style="border-spacing: 0;" role="presentation" >
<tr>
<td>
<!-- If its a normal email you can just start your paragraphs right here anything else you need to build more tables inside this -->
<table class="mealplantable" role="presentation" id ="mealplantable">
<thead>
<tr>
<th>Food</th>
<th>Cooked Weight</th>
<th>Raw Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="background-color: #ebd06a;">
<td>%M12_FOOD%</td>
<td>%M12_WEIGHT%</td>
<td>%M12_RAW%</td>
</tr>
<tr>
<td>%M13_FOOD%</td>
<td>%M13_WEIGHT%</td>
<td>%M13_RAW%</td>
</tr>
<tr style="background-color: #ebd06a;">
<td>%M14_FOOD%</td>
<td>%M14_WEIGHT%</td>
<td>%M15_RAW%</td>
</tr>
<tr>
<td>%M15_FOOD%</td>
<td>%M15_WEIGHT%</td>
<td>%M15_RAW%</td>
</tr>
<tr style="background-color: #ebd06a;">
<td>%M16_FOOD%</td>
<td>%M16_WEIGHT%</td>
<td>%M16_RAW%</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!-- End second table-->
</body>
</html>