CAUTION: While the colors may not be optimal, they were specifically requested to align with my company's branding. Although I hope to update them in the future, for now this is how it stands. (If you have any suggestions on how to make them more transparent, I am open to making adjustments. Unfortunately, I'm unsure of the RGBA values for these colors.)
I've experimented with colspan without success. I've attempted various methods with no luck. The only options that seem viable are:
https://i.sstatic.net/Sg2iE.png
Below is the Jinja code used to generate the displayed HTML.
jinja_tmplt = """<style>
table.greenCisco {
border: 2px solid #005C21;
background-color: #6CC04A;
width: 100%;
text-align: center;
border-collapse: collapse;
}
tr:nth-child(even) {
background: #ABC233;
}
tr:nth-child(odd) {
background: #6CC04A;
}
table.greenCisco td, table.greenCisco th {
border: 2px solid #000000;
padding: 3px 2px;
}
table.greenCisco tbody td {
color: #FFFFFF;
}
table.greenCisco thead {
background: #005C21;
border-bottom: 1px solid #444444;
}
table.greenCisco thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
border-left: 2px solid #D0E4F5;
}
table.blueTable tfoot {
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
background: #D0E4F5;
text-align: center;
border-top: 2px solid #444444;
}
</style>
{% for html_CI in html_CI_list %}
{% set columns = html_CI.tech_DF.columns.values[1:] %}
<h1>{{ html_CI.tech_grp }}</h1><br/>
<table class="greenCisco">
<thead>
<tr>
{% for col_hdr in columns %}
<th>{{ col_hdr }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in html_CI.tech_DF.itertuples() %}
{% set row_num = loop.index0 %}
{% if row_num % 2 == 0 %}
<tr bgcolor="#ABC233">
{% else %}
<tr bgcolor="#6CC04A">
{% endif %}
{% for elem_data in row[2:] %}
{% set loop_num = loop.index0 %}
{% if loop_num == 0 %}
<td>{{ elem_data }}</td>
{% else %}
{% if elem_data == 0 %}
<td><div style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">✓</div></td>
{% elif elem_data == 1 %}
<td><div style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">✓</div></td>
{% elif elem_data == 2 %}
<td><div style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">✓</div></td>
{% endif %}
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
<tfoot valign="center">
<tr colspan="0" style="width: 100%"><span style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">✓</span> <b>Pending</b> <span style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">✓</span> <b>In Progress</b> <span style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">✓</span> <b>Complete</b></tr>
</tfoot>
</table>
{% endfor %}"""
I also attempted adding "display: flex; flex-direction:column;" to the footer style with no success.
https://i.sstatic.net/EuqGV.png
The above results occurred when including the TD tag - regardless of the colspan attribute.
While I do not claim to be an HTML expert, I have pieced together knowledge from MySpace and other sources over time. This particular issue has me stumped!
Thank you in advance for any assistance.