【问题标题】:Remove row colours from the biggest table从最大的表格中删除行颜色
【发布时间】:2017-03-25 04:50:39
【问题描述】:

由于在另一个 <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>

如果问题不清楚,请告诉我。为了澄清,只需运行代码,您就会看到。

【问题讨论】:

    标签: html css


    【解决方案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; }
    

    【讨论】:

      【解决方案2】:

      好的,这是非常基本的 CSS,但是解决您的问题的方法可能是为您的内部表添加一个唯一的类名,并为您的外部表添加另一个唯一的类名,然后使用类选择器将颜色应用于您的内部表.

      <table class="inner">
      

      这会将类添加到表中。 然后最后通过在&lt;style&gt; 标签中使用 CSS 类选择器在您的 CSS 中使用特定颜色引用它:

      <style>
         .center{
            ......(your css here).....
         }
      <style>
      

      进一步参考:

      HTML class names

      The CSS class selector

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2019-11-23
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多