how to make dynamic color change in table heading in django

Table heading color not working after 3 class name in CSS, I want to change color when if new data will be added in database after 3 heading how to make it dynamic color change in CSS.

<style>.demo1{
    background-color: #F4CCCC;
  }
  .demo2{
    background-color: #D0E0E3;
  }
  .demo3{
    background-color: #EAD1DC;
  } </style>


 {% for i in trades %}
    <th  class="demo{{forloop.counter}}">Capicity</th>
    <th  class="demo{{forloop.counter}}">Total</th>
    <th  class="demo{{forloop.counter}}">Training completed</th>
    {% endfor %}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can use the cycle templatetag to repeat the same colors: https://docs.djangoproject.com/en/3.2/ref/templates/builtins/#cycle

.bg-1 > th {
  background-color: blue;
}
.bg-2 > th {
  background-color: red;
}
.bg-3 > th {
  background-color: green;
}

{% for i in trades %}
<tr class="{% cycle 'bg-1' 'bg-2' 'bg-3' %}">
    <th>Capicity</th>
    <th>Total</th>
    <th>Training completed</th>
</tr>
{% endfor %}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0