我將 base.html 用于 css 樣式，并使用另一個 html 模板作為表格。我想在 base.html 中添加樣式，以便我可以將 base.html 重用于條帶表。我已經嘗試過 nth-child 但它不起作用，我不想在 home.html 中制作那種樣式。我懷疑它是否與 home.html 中的 for 回圈有關。有沒有辦法在 base.html 中制作條紋表樣式？這是用于電子郵件模板。此代碼在瀏覽器上運行時作業正常，但用于發送電子郵件時，它不應用我需要的樣式。
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 class="pretty">
{% block content %}{% endblock %}
</body>
</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%}
uj5u.com熱心網友回復：
盡管這聽起來令人不快，但如果您將 html 作為電子郵件發送，看起來好像您必須在每一行的樣式元素中硬編碼背景顏色。caniemail.com資源非常方便檢查您的 html 或 css 是否受支持。
uj5u.com熱心網友回復：
我認為您可以使用:nth-child(odd)andnth-child(even)來設定行的樣式。您可以在此處閱讀更多相關資訊：https ://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
我創建了一個小例子來說明我的意思
table tr:nth-child(even) {
background-color: orange;
}<table>
<tr>
<td> </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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/504286.html