Alternate table Row Color in HTML/CSS for Easy User Experience?-CodePudding

I am 100% the code outside of what I am posting is correct. It is my understanding of HTML/CSS tables that is causing my issue. For a table with (x) number of rows, when using the following format, How do I ensure every other line is printed gray-white-gray-white, ad infinitum.

I am also aware that the code Im posting only causes the data to be printed twice for each row, it is the closest I could figure myself, for the time being.

  <table style='margin:auto;text-align: center;'>
            <thead>
                <tr>
                    <th >Name</th>
                    <th >Retail Price</th>
                    <th >Avg Purchase Cost</th>
                    <th >Quantity</th>
                </tr>
            </thead>
            
            {% for artwork in artwork_inventory %}
            <tbody>
                <tr>
                    <td >{{ artwork.name }}</td>
                    <td >{{ artwork.currentprice }}</td>
                    <td >{{ artwork.averageCost }}</td>
                    <td >{{ artwork.onHandQuantity }}</td>
                </tr>
                <tr>
                    <td >{{ artwork.name }}</td>
                    <td >{{ artwork.currentprice }}</td>
                    <td >{{ artwork.averageCost }}</td>
                    <td >{{ artwork.onHandQuantity }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>

CodePudding user response：

How about adding another value such as artwork.id

Then do an if statement inside the for loop


{% for artwork in artworks_inventory %}

{% if artwork.id % 2 == 0 %}

                <tr>
                    <td >{{ artwork.name }}</td>
                    <td >{{ artwork.currentprice }}</td>
                    <td >{{ artwork.averageCost }}</td>
                    <td >{{ artwork.onHandQuantity }}</td>
                </tr>
                <tr>
                    <td >{{ artwork.name }}</td>
                    <td >{{ artwork.currentprice }}</td>
                    <td >{{ artwork.averageCost }}</td>
                    <td >{{ artwork.onHandQuantity }}</td>
                </tr>
            

{% else %}


                <tr>
                    <td >{{ artwork.name }}</td>
                    <td >{{ artwork.currentprice }}</td>
                    <td >{{ artwork.averageCost }}</td>
                    <td >{{ artwork.onHandQuantity }}</td>
                </tr>
                <tr>
                    <td >{{ artwork.name }}</td>
                    <td >{{ artwork.currentprice }}</td>
                    <td >{{ artwork.averageCost }}</td>
                    <td >{{ artwork.onHandQuantity }}</td>
                </tr>
            


{% endif %}



{% endfor %}

CodePudding user response：

You can use the nth-child(odd) pseudo class selector in CSS.

You want the first row of the tbody to have a gray background then the next one a white one then the next one gray and so on.

So you can select this way:

tbody tr:nth-child(odd) { background-color: #eeeeee; }
tbody tr:nth-child(even) { background-color: #ffffff; }

Here's an HTML/CSS snippet to show the idea.

tbody tr:nth-child(odd) {
  background-color: #eee;
}

tbody tr:nth-child(even) {
  background-color: #fff;
}

<table style='margin:auto;text-align: center;'>
  <thead>
    <tr>
      <th >Name</th>
      <th >Retail Price</th>
      <th >Avg Purchase Cost</th>
      <th >Quantity</th>
    </tr>
  </thead>

  <!--{% for artwork in artwork_inventory %} -->
  <tbody>
    <tr>
      <td >{{ artwork.name }}</td>
      <td >{{ artwork.currentprice }}</td>
      <td >{{ artwork.averageCost }}</td>
      <td >{{ artwork.onHandQuantity }}</td>
    </tr>
    <tr>
      <td >{{ artwork.name }}</td>
      <td >{{ artwork.currentprice }}</td>
      <td >{{ artwork.averageCost }}</td>
      <td >{{ artwork.onHandQuantity }}</td>
    </tr>
    <tr>
      <td >{{ artwork.name }}</td>
      <td >{{ artwork.currentprice }}</td>
      <td >{{ artwork.averageCost }}</td>
      <td >{{ artwork.onHandQuantity }}</td>
    </tr>
    <tr>
      <td >{{ artwork.name }}</td>
      <td >{{ artwork.currentprice }}</td>
      <td >{{ artwork.averageCost }}</td>
      <td >{{ artwork.onHandQuantity }}</td>
    </tr>
    <tr>
      <td >{{ artwork.name }}</td>
      <td >{{ artwork.currentprice }}</td>
      <td >{{ artwork.averageCost }}</td>
      <td >{{ artwork.onHandQuantity }}</td>
    </tr>
    <tr>
      <td >{{ artwork.name }}</td>
      <td >{{ artwork.currentprice }}</td>
      <td >{{ artwork.averageCost }}</td>
      <td >{{ artwork.onHandQuantity }}</td>
    </tr>
    <!-- {% endfor %} -->
  </tbody>
</table>

Incidentally in your code be careful where you put the tbody, it looks as though it will be repeated for every pair of rows you are outputting.