2017-03-25 3 views
0

<table>タグを別の<table>タグ内に使用することで、1ページの隅にテーブルを置くことに問題があります。しかし、行の色は巨大なテーブルにも当てはまりますが、私は色を混乱させましたが、私はそれを望んでいません。誰でもこの問題を解決できるでしょうか?最大のテーブルから行の色を削除する

問題は次の場所にあります。

{% 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>

質問が不明である場合を教えてください:ここでは

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} 

はメインのコードです。明確にするには、コードを実行すると表示されます。

答えて

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; } 
0

さて、これはかなり基本的なCSSですが、あなたの問題を解決するには、にありますおそらく内部テーブルに一意のクラス名を追加し、外部テーブルに一意のクラス名を追加し、クラスセレクタを使用して内部テーブルに色を適用します。

<table class="inner"> 

これは、クラスをテーブルに追加します。 して、最終的にあなたの<style>タグにCSSクラスセレクタを使用して、特定の色で、あなたのCSSで参照:

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

をさらに参考までに:

HTML class names

The CSS class selector

関連する問題