I have the following HTML table code:
<html>
<head>
<style>
table {
border-spacing: 0;
}
thead tr {
background: #36304a;
color: #fff;
}
thead th {
padding: 10px 25px;
}
thead th:first-child {
border-top-left-radius: 10px;
}
thead th:last-child {
border-top-right-radius: 10px;
}
tbody tr:nth-child(even) {
background: #f5f5f5;
}
tbody td {
padding: 10px 0 10px 25px;
}
.table-container {
margin-bottom: 20px;
}
.error {
background: #ff6d6c;
}
.success {
background: #c4e0b5;
}
.round-bottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Criteria</th>
<th>Expected Value</th>
<th>Result</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abc</td>
<td>200</td>
<td>500</td>
<td>Fail</td>
</tr>
<tr>
<td>kuku</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td>lulu</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td colspan="4" class="round-bottom error">
gilbert
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Criteria</th>
<th>Expected Value</th>
<th>Result</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abc</td>
<td>200</td>
<td>500</td>
<td>Fail</td>
</tr>
<tr>
<td>kuku</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td>lulu</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td colspan="4" class="round-bottom success">
gilbert
</td>
</tr>
</tbody>
</table>
</div>
</body>
When viewing the email on Outlook, the table does not render properly:
However, on Outlook on the Web it looks fine.
I read online that Outlook uses Word to render HTML, and it has some limitations - but I'm not sure how to get around these. I tried modifying background property to background-color but it didn't do the trick.
