CSS 中的条纹表

Question

I am using base.html for css styling and another html template for table.我正在使用 base.html 用于 css 样式和另一个 html 模板用于表格。 I want to add style in base.html so that I can reuse base.html for striped table.我想在 base.html 中添加样式，以便我可以将 base.html 重用于条带表。 I have tried nth-child but it did not work and I don't want to make that styling in home.html.我已经尝试过 nth-child，但它没有用，我不想在 home.html 中制作这种样式。 I doubt if it has to do with for loop in home.html.我怀疑它是否与 home.html 中的 for 循环有关。 Is there a way to make striped table styling in base.html?有没有办法在 base.html 中制作条纹表样式？ This is for email template.这适用于 email 模板。 This code works fine when running on browser but when used to send an email, it does not apply the styling i need.此代码在浏览器上运行时工作正常，但当用于发送 email 时，它不应用我需要的样式。

base.html底座.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 class="pretty">
        {% block content %}{% endblock %}
    </body>
</html>

home.html主页.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%}

Answer 1

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.这听起来令人不快，如果您将 html 作为 email 发送，看起来您将不得不在每一行的样式元素中硬编码背景颜色。 The caniemail.com resource is quite handy to check if your html or css is supported. caniemail.com资源非常方便检查您的 html 或 css 是否受支持。

Answer 2

I think you can use the :nth-child(odd) and nth-child(even) to style the rows.我认为您可以使用:nth-child(odd)和nth-child(even)来设置行的样式。 You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child你可以在这里阅读更多信息： 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>

CSS 中的条纹表

问题描述

2 个解决方案

解决方案1
1 2022-08-30 18:47:36

解决方案2
0 2022-08-30 18:10:25

CSS 中的条纹表

问题描述

2 个解决方案

解决方案1 1 2022-08-30 18:47:36

解决方案2 0 2022-08-30 18:10:25

解决方案1
1 2022-08-30 18:47:36

解决方案2
0 2022-08-30 18:10:25