I am working with a table that has dynamic values in its td cells. Some td cells will be empty while others will have values. I want the empty td cells to have a red background, and the filled td cells to have a green background. I attempted to achieve this using CSS with the following code:
td:empty {
background-color: red;
}
However, I encountered an issue where the empty td cells contain only spaces and lines, rendering the td:empty selector ineffective.
In other words, the CSS interprets these spaces and lines as content within the td tag, even though they are essentially fake content. How can I resolve this issue?
--- Update --- Here is the output result: https://i.sstatic.net/b1wd5.png And here is the script:
<td>
{% for mission in missions|get_missions_by_user:user %}
{% if mission.start_date|date:"d-m-Y" == week_dates.6.date|date:"d-m-Y" %}
{{ mission.title }}
<!-- Filled cell - this should have a green background -->
<br>
{% endif %}
<!-- Empty cell - this should have a red background -->
{% endfor %}
</td>