Striped table in CSS-CodePudding

I am using base.html for css styling and another html template for table. I want to add style in base.html so that I can reuse base.html for striped table. I have tried nth-child but it did not work and I don't want to make that styling in home.html. I doubt if it has to do with for loop in home.html. Is there a way to make striped table styling in base.html? This is for email template. This code works fine when running on browser but when used to send an email, it does not apply the styling i need.

base.html

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
        <style type="text/css">
            table tr td{
                color:black;
                background: white;
                border: 1px;
            }
            th{
                color:black;
                background: white;

            }
            table tr:nth-child(2n 1) td{
                background: orange;
            }
            table.collapsed{
                border-collapse: collapse;
                border:1px solid black;
            }
        </style>
    </head>
    <body >
        {% block content %}{% endblock %}
    </body>
</html>

home.html

{% extends "base.html" %}
{% block content %}

<table align="center" summary="output">
    <tr>
        <th scope="col">
            Column A
        </th>
        <th scope="col">
            Column B
        </th>
        <th scope="col">
            Column C
        </th>
    </tr>
    {% for row in data[1] %}
    <tr>
        <td>
            {{row[1]}}
        </td>
        <td>
            {{row[2]}}
        </td>
        <td>
            {{row[3]}}
        </td>
    </tr>
        {%endfor%}

</table>

{%endblock%}

CodePudding user response：

As unpleasant as this sounds, if you're sending the html as an email it looks as though you're going to have to hard code the background color in a style element on each row. The caniemail.com resource is quite handy to check if your html or css is supported.

CodePudding user response：

I think you can use the :nth-child(odd) and nth-child(even) to style the rows. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

I have created a small example to illustrate what i mean

table tr:nth-child(even) {
  background-color: orange;
}

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>