由于在另一个<table>标记内使用<table>标记，我遇到了一个问题，目的是在单个页面的角落中放置表格。然而，我搞砸了颜色，因为行颜色也适用于巨大的桌子，但我不想要那样。任何人都可以解决这个问题吗？
问题出在这里：
table{border-collapse: collapse;}
tr, th, td{border:solid 1px #fff}
td{width:50px; padding:15px}
th{background:#006599; color :#fff}
tr:nth-child(even){background:#c7d4e5}
tr:nth-child(odd){background:#E5E5E5}
这是主要代码：
{% load i18n %}
<html>
<head>
<style>
table{border-collapse: collapse;}
tr, th, td{border:solid 1px #fff}
td{width:50px; padding:15px}
th{background:#006599; color :#fff}
tr:nth-child(even){background:#c7d4e5}
tr:nth-child(odd){background:#E5E5E5}
h1 {
margin-bottom: 0;
padding: 0.3em 0;
border-bottom: 1px solid #777;
}
h2 {
color: #999;
font-size: 1.2em;
padding-top: 0.4em;
}
address {
padding: 0.8em;
font-size: 0.9em;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
page[size="A3"] {
width: 29.7cm;
height: 42cm;
}
page[size="A3"][layout="portrait"] {
width: 42cm;
height: 29.7cm;
}
page[size="A5"] {
width: 14.8cm;
height: 21cm;
}
page[size="A5"][layout="portrait"] {
width: 21cm;
height: 14.8cm;
}
.header,
.content {
padding-right: 30%;
}
.center {
text-align: center;
}
.border {
border: 1px solid #777;
}
.border td,
.border th {
border: 1px solid #777;
}
table {
border-collapse: collapse;
}
table td,
table th {
border-collapse: collapse;
padding: 4px 8px;
}
@media print {
body, page {
margin: 0;
}
.djDebug {
display: none;
}
}
@media screen {
html {
background: #999;
}
body {
margin: 20px 30%;
padding-top: 3em;
padding-left: 3em;
}
}
</style>
</head>
<body>
<th><center><h1>Crédit 24 - {% trans "Customer profile" %}</h1><center></th>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered">
<tr>
<td>{% trans "Date" %}</td>
<td>{% now "jS F Y" %}</td>
</tr>
<tr>
<td>{% trans "Customer id" %}</td>
<td>{{ customerprofile.amortizing_table_context.customer_code}}</td>
</tr>
</table>
<table>
<tr>
<td>
<table>
<tr>
<th colspan="2"><h2>{% trans "General informations" %}</h2></th>
</tr>
<tr>
<td>{% trans "First name" %}</td>
<td class="col-md-9">{{ customerprofile.amortizing_table_context.first_name}}</td>
</tr>
<tr>
<td>{% trans "Last name" %}</td>
<td>{{ customerprofile.amortizing_table_context.last_name}}</td>
</tr>
<tr>
<td>{% trans "Email" %}</td>
<td>{{ customerprofile.email}}</td>
</tr>
<tr>
<td>{% trans "Language" %}</td>
<td>{{ customerprofile.language }}</td>
</tr>
<tr>
<td>{% trans "Primary phone" %}</td>
<td>{{ customerprofile.phone_1 }}</td>
</tr>
<tr>
<td>{% trans "Secondary phone" %}</td>
<td>{{ customerprofile.phone_2 }}</td>
</tr>
<tr>
<td>{% trans "Fax" %}</td>
<td>{{ customerprofile.fax }}</td>
</tr>
<tr>
<td>{% trans "Social Security number (SSN)" %}</td>
<td>{{ customerprofile.ssn }}</td>
</tr>
<tr>
<td>{% trans "Birth date" %}</td>
<td>{{ customerprofile.birth_date }}</td>
</tr>
<tr>
<td>{% trans "Principal address" %}</td>
<td>{{ customerprofile.address }}</td>
</tr>
<tr>
<td>{% trans "Secondary address" %}</td>
<td>{{ customerprofile.address_line2}}</td>
</tr>
<tr>
<td>{% trans "City" %}</td>
<td>{{ customerprofile.city }}</td>
</tr>
<tr>
<td>{% trans "State" %}</td>
<td>{{ customerprofile.state }}</td>
</tr>
<tr>
<td>{% trans "Zip code" %}</td>
<td>{{ customerprofile.zip_code }}</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<th colspan="2"> <h2>{% trans "Financial" %}</h2></th>
</tr>
<tr>
<td>{% trans "Income source" %}</td>
<td>{{ customerprofile.financialprofile.income_source }}</td>
</tr>
<tr>
<td>{% trans "Bank" %}</td>
<td>{{ customerprofile.financialprofile.bank }}</td>
</tr>
<tr>
<td>{% trans "Bank transit" %}</td>
<td>{{ customerprofile.financialprofile.bank_transit }}</td>
</tr>
<tr>
<td>{% trans "Bank account" %}</td>
<td>{{ customerprofile.financialprofile.bank_account }}</td>
</tr>
<tr>
<td>{% trans "Monthly pay amount" %}</td>
<td>{{ customerprofile.financialprofile.pay_amount }}</td>
</tr>
<tr>
<td>{% trans "Pay frequency" %}</td>
<td>{{ customerprofile.financialprofile.pay_frequency }}</td>
</tr>
<tr>
<td>{% trans "First pay date" %}</td>
<td>{{ customerprofile.financialprofile.first_pay_date }}</td>
</tr>
<tr>
<td>{% trans "Second pay date" %}</td>
<td>{{ customerprofile.financialprofile.second_pay_date }}</td>
</tr>
<tr>
<td>{% trans "Monthly micro loan amount" %}</td>
<td>{{ customerprofile.financialprofile.micro_loan_monthly_amount }}</td>
</tr>
<tr>
<td>{% trans "Account balance on pay day" %}</td>
<td>{{ customerprofile.financialprofile.bank_account_balance_on_pay_day }}</td>
</tr>
<tr>
<td>{% trans "Bankruptcy" %}</td>
<td>{% if customerprofile.financialprofile.had_bankruptcy %}
{{ "Yes" }}{% else %}{{ "No" }}
{% endif %}</td>
</tr>
<tr>
<td>{% trans "Consumer proposal" %}</td>
<td>{% if customerprofile.financialprofile.had_consumer_proposal %}
{{ "Yes" }}{% else %}{{ "No" }}
{% endif %}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<th colspan="2"><h2>{% trans "Employer" %}</h2></th>
</tr>
<tr>
<td>{% trans "Company name" %}</td>
<td>{{ customerprofile.employerprofile.company_name }}</td>
</tr>
<tr>
<td>{% trans "Job title" %}</td>
<td>{{ customerprofile.employerprofile.job_title }}</td>
</tr>
<tr>
<td>{% trans "Date hired" %}</td>
<td>{{ customerprofile.employerprofile.date_hired }}</td>
</tr>
<tr>
<td>{% trans "Supervisor name" %}</td>
<td>{{ customerprofile.employerprofile.supervisor_name }}</td>
</tr>
<tr>
<td>{% trans "Phone" %}</td>
<td>{{ customerprofile.employerprofile.phone }}</td>
</tr>
<tr>
<td>{% trans "Phone extension" %}</td>
<td>{{ customerprofile.employerprofile.phone_extension }}</td>
</tr>
<tr>
<td>{% trans "Address" %}</td>
<td>{{ customerprofile.employerprofile.address }}</td>
</tr>
<tr>
<td>{% trans "Secondary address" %}</td>
<td>{{ customerprofile.employerprofile.address_line2 }}</td>
</tr>
<tr>
<td>{% trans "City" %}</td>
<td>{{ customerprofile.employerprofile.city }}</td>
</tr>
<tr>
<td>{% trans "State" %}</td>
<td>{{ customerprofile.employerprofile.state }}</td>
</tr>
<tr>
<td>{% trans "Zip code" %}</td>
<td>{{ customerprofile.employerprofile.zip_code }}</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<th colspan="2"><h2>{% trans "References" %}</h2></th>
</tr>
<tr>
<td>{% trans "Reference 1 - Fullname" %}</td>
<td>{{ customerprofile.referencesprofile.ref1_fullname }}</td>
</tr>
<tr>
<td>{% trans "Reference 1 - Phone" %}</td>
<td>{{ customerprofile.referencesprofile.ref1_phone }}</td>
</tr>
<tr>
<td>{% trans "Reference 1 - Link" %}</td>
<td>{{ customerprofile.referencesprofile.ref1_link }}</td>
</tr>
<tr>
<td>{% trans "Reference 2 - Fullname" %}</td>
<td>{{ customerprofile.referencesprofile.ref2_fullname }}</td>
</tr>
<tr>
<td>{% trans "Reference 2 - Phone" %}</td>
<td>{{ customerprofile.referencesprofile.ref2_phone }}</td>
</tr>
<tr>
<td>{% trans "Reference 2 - Link" %}</td>
<td>{{ customerprofile.referencesprofile.ref2_link }}</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<script>window.print()</script>
</html>
如果问题不清楚，请告诉我。为了澄清，只需运行代码，您就会看到。
答案 0 :(得分：1)
您应该为所有内部表提供class属性，然后将特定于该类的CSS定位。
例如，您的HTML可能如下所示：
<table>
<tr>
<td>
<table class="inner"> . . . </table>
</td>
</tr>
</table>
CSS就像这样：
table.inner tr:nth-child(even){ background:#c7d4e5; }
table.inner tr:nth-child(odd) { background:#e5e5e5; }
答案 1 :(得分：0)
好的，这是非常基本的CSS，但问题的解决方案是可能为内部表添加一个唯一的类名，为外部表添加另一个唯一的类名，然后使用类选择器将颜色应用于内部表
<table class="inner">
这会将类添加到表中。
最后使用<style>标记中的CSS类选择器，使用特定颜色在css中引用它：
<style>
.center{
......(your css here).....
}
<style>
供进一步参考：