2017-08-07 915 views
4

我在使用Google Chrome打印包含HTML代碼的表格時遇到問題。我需要創建一個帶有標題的文檔,爲了達到這個目的,我使用了一個帶有thead元素的表格,這樣瀏覽器就會將它複製到打印文檔中的每個頁面上。在Google Chrome瀏覽器中打印表格時,內容與頁眉重疊

問題是當我在<tr>元素中有分頁符時,內容與標題重疊。按照問題和代碼打印出來。

The Print

iframe { 
 
    height: 400mm; 
 
    width: 300mm; 
 
    page-break-after: always; 
 
} 
 

 
.barcode { 
 
    font-family: 'c39hrp36dltt'; 
 
    font-size: 4em; 
 
} 
 

 
.document { 
 
    width: 100%; 
 
    height: 100%; 
 
    page-break-after: always; 
 
    font-family: 'Arial'; 
 
} 
 

 
.dont-break-inside { 
 
    page-break-inside: avoid; 
 
} 
 

 
.huge { 
 
    font-weight: 700; 
 
    font-size: 3em; 
 
} 
 

 
.title { 
 
    text-align: center; 
 
    background-color: #a9a9a9; 
 
    font-weight: 700; 
 
    padding: 5px; 
 
} 
 

 
.line { 
 
    border-bottom: solid 1px #727273; 
 
    margin-top: 25px; 
 
    width: 100%; 
 
} 
 

 
.center { 
 
    vertical-align: middle; 
 
    margin-left: 4cm; 
 
} 
 

 
.cover-infos { 
 
    width: 21cm; 
 
    border: 1px solid; 
 
    border-collapse: collapse; 
 
    margin-top: 1cm; 
 
} 
 

 
.cover-infos td { 
 
    border: 1px solid; 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 

 
.header-template { 
 
    width: 100%; 
 
    margin-right: 10px; 
 
    border-collapse: collapse; 
 
} 
 

 
.header-template tr { 
 
    border: solid 1px; 
 
} 
 

 
.header-template td { 
 
    word-wrap: break-word; 
 
    padding: 2px 
 
} 
 

 
.header-template .barcode { 
 
    font-family: 'c39hrp48dhtt'; 
 
    font-size: 5em; 
 
    white-space: nowrap; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
</head> 
 

 
<body> 
 

 
    <div class="document"> 
 
    <table id="page"> 
 
     <thead> 
 
     <tr> 
 
      <td> 
 
      <table class="header-template"> 
 
       <tr> 
 
       <td class="barcode" rowspan="2"> 
 
        *CQS-51582* 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td> 
 
        <strong>Curso: </strong>BACHARELADO EM CIÊNCIAS ECONÔMICAS 
 
       </td> 
 
       <td> 
 
        <strong>Disciplina: </strong>MATEMÁTICA FINANCEIRA 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td colspan="3" class="title"> 
 
        Caderno de Questões - Prova Número 1 
 
       </td> 
 
       </tr> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 

 
      <div><strong>Questão 1 (0,50)</strong></div> 
 
      <div> 
 
       <p> 
 
       <div> 
 
        <div style="text-align:justify">Em qual montante se transforma um capital de R$ 100.000,00 em 6 meses , considerando uma taxa de 3%a.m.?&nbsp;</div> 
 
       </div> 
 
       </p> 
 
      </div> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 

 
      <div><strong>Questão 2 (0,50)</strong></div> 
 
      <div> 
 
       <p> 
 
       <div> 
 
        <div style="text-align: justify;">A amortiza&ccedil;&atilde;o &eacute; um processo financeiro, pelo qual uma d&iacute;vida ou obriga&ccedil;&atilde;o &eacute; paga progressivamente por meio de parcelas,&nbsp;de modo que, ao t&eacute;rmino do prazo estipulado, o d&eacute;bito 
 
        seja liquidado (SAMANEZ 2007). <strong>Quais s&atilde;o os sistemas de amortiza&ccedil;&atilde;o mais utilizados? Explique e relate cada um dos sistemas.</strong></div> 
 
       </div> 
 
       </p> 
 
      </div> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 

 
      <div><strong>Questão 3 (0,50)</strong></div> 
 
      <div> 
 
       <p> 
 
       <div> 
 
        <div style="text-align:justify"> 
 
        <div>Imagine que o av&ocirc; de Jefferson&nbsp;tenha feito, no passado, uma aplica&ccedil;&atilde;o de R$ 1.000,00. Em seu testamento, colocou a condi&ccedil;&atilde;o de que seu neto&nbsp;resgataria esse investimento quando esta completasse 
 
         100 anos, recebendo rendimentos. Veja a tabela que segue:</div> 
 

 
        <table align="center" border="1" cellpadding="0" cellspacing="0" style="width:100%"> 
 
         <tbody> 
 
         <tr> 
 
          <td>Taxa anual</td> 
 
          <td>Valor aplicado</td> 
 
          <td>Em 10 anos</td> 
 
          <td>Em 100 anos</td> 
 
         </tr> 
 
         <tr> 
 
          <td>1% ao ano</td> 
 
          <td>R$ 1.000,00</td> 
 
          <td>R$ 1.104,62</td> 
 
          <td>R$ 2.704,81</td> 
 
         </tr> 
 
         <tr> 
 
          <td>2% ao ano</td> 
 
          <td>R$ 1.000,00</td> 
 
          <td>R$ 1.219,00</td> 
 
          <td>R$ 7.244,64</td> 
 
         </tr> 
 
         <tr> 
 
          <td>4% ao ano</td> 
 
          <td>R$ 1.000,00</td> 
 
          <td>R$ 1.480,24</td> 
 
          <td>R$ 50.504,94</td> 
 
         </tr> 
 
         <tr> 
 
          <td>8% ao ano</td> 
 
          <td>R$ 1.000,00</td> 
 
          <td>R$ 2.158,92</td> 
 
          <td>R$ 2.199.761,25</td> 
 
         </tr> 
 
         </tbody> 
 
        </table> 
 

 
        <div><br /> &nbsp; 
 
        </div> 
 

 
        <div>Essa disparidade dos juros d&aacute;-se por conta da diferen&ccedil;a da taxa de juros, obtida&nbsp;no caso apresentado,&nbsp;entre 1 e 8% ao ano, pelo longo per&iacute;odo de 100 anos - &eacute; a m&aacute;gica dos juros compostos! 
 
         Albert Einsten chegou a dizer que &quot;os juros compostos s&atilde;o a for&ccedil;a mais poderosa do universo e a maior inven&ccedil;&atilde;o da humanidade, porque permite uma confi&aacute;vel e sistem&aacute;tica acumula&ccedil;&atilde;o 
 
         de riqueza.&quot;&nbsp;</div> 
 

 
        <div>Dispon&iacute;vel em:&lt;&nbsp;https://www.parmais.com.br/&gt; Acesso em 07 maio 2017&nbsp;(adaptado).</div> 
 

 
        <div><br /> 
 
         <strong>No que se refere &agrave; capitaliza&ccedil;&atilde;o composta,&nbsp;avalie as asser&ccedil;&otilde;es a seguir e a rela&ccedil;&atilde;o proposta entre elas.</strong><br /> 
 
         <br /> I. Os juros compostos apresentam uma situa&ccedil;&atilde;o caracterizada por progress&atilde;o geom&eacute;trica.<br /> 
 
         <br /> 
 
         <strong>Porque</strong><br /> 
 
         <br /> II. Toda sequ&ecirc;ncia num&eacute;rica, na qual cada termo, a partir do segundo, &eacute; igual ao anterior multiplicado por uma constante, &eacute; chamada de progress&atilde;o geom&eacute;trica (PG).<br /> 
 
         <br /> 
 
         <strong>A respeito dessas asser&ccedil;&otilde;es, assinale a op&ccedil;&atilde;o correta.</strong></div> 
 
        </div> 
 
       </div> 
 
       </p> 
 
       <ol type="A"> 
 
       <li> 
 
        <p>As asser&ccedil;&otilde;es I e II s&atilde;o proposi&ccedil;&otilde;es verdadeiras&nbsp;e a II &eacute; uma justificativa correta da I.</p> 
 
       </li> 
 
       <li> 
 
        <p>As asser&ccedil;&otilde;es I e II s&atilde;o proposi&ccedil;&otilde;es verdadeiras, mas a II n&atilde;o &eacute; uma justificativa correta da I.</p> 
 
       </li> 
 
       <li> 
 
        <p>A asser&ccedil;&atilde;o I &eacute; uma proposi&ccedil;&atilde;o verdadeira&nbsp;e a II &eacute; uma proposi&ccedil;&atilde;o falsa.</p> 
 
       </li> 
 
       <li> 
 
        <p>A asser&ccedil;&atilde;o I &eacute; uma proposi&ccedil;&atilde;o falsa&nbsp;e a II &eacute; uma proposi&ccedil;&atilde;o verdadeira.</p> 
 
       </li> 
 
       <li> 
 
        <p>As asser&ccedil;&otilde;es I e II s&atilde;o proposi&ccedil;&otilde;es falsas.</p> 
 
       </li> 
 
       </ol> 
 
      </div> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 

 
      <div><strong>Questão 9 (0,50)</strong></div> 
 
      <div> 
 
       <p> 
 
       <div> 
 
        <div>Eduardo comprou um carro de forma financiada. O pre&ccedil;o &agrave; vista do ve&iacute;culo &eacute; de R$ 50.000,00. O contrato da opera&ccedil;&atilde;o financeira apresenta uma vig&ecirc;ncia de 24 presta&ccedil;&otilde;es mensais,&nbsp;&agrave; 
 
        taxa de 3,5% a.m. <strong>Sobre o processo de amortiza&ccedil;&atilde;o dessa d&iacute;vida, avalie as afirmativas abaixo.</strong></div> 
 

 
        <div>&nbsp;</div> 
 

 
        <table border="1" cellpadding="0" cellspacing="0" style="width:428px"> 
 
        <tbody> 
 
         <tr> 
 
         <td style="height:20px; width:64px"><strong>n</strong></td> 
 
         <td style="width:80px"><strong>Presta&ccedil;&atilde;o</strong></td> 
 
         <td style="width:75px"><strong>Juros&nbsp;</strong></td> 
 
         <td style="width:95px"><strong>Amortiza&ccedil;&atilde;o</strong></td> 
 
         <td style="width:115px"><strong>Saldo Devedor</strong></td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">0</td> 
 
         <td>*********</td> 
 
         <td>******</td> 
 
         <td>************</td> 
 
         <td>50.000,00</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">1</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>1750</td> 
 
         <td>-1.363,64</td> 
 
         <td>48.636,36</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">2</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>1702,27255</td> 
 
         <td>-R$ 1.411,37</td> 
 
         <td>R$ 47.224,99</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">3</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 1.652,87</td> 
 
         <td>-R$ 1.460,77</td> 
 
         <td>R$ 45.764,22</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">4</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 1.601,75</td> 
 
         <td>-R$ 1.511,89</td> 
 
         <td>R$ 44.252,33</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">5</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 1.548,83</td> 
 
         <td>-R$ 1.564,81</td> 
 
         <td>R$ 42.687,52</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">6</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 1.494,06</td> 
 
         <td>-R$ 1.619,58</td> 
 
         <td>R$ 41.067,94</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">7</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 1.437,38</td> 
 
         <td>-R$ 1.676,26</td> 
 
         <td>R$ 39.391,68</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">8</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 1.378,71</td> 
 
         <td>-R$ 1.734,93</td> 
 
         <td>R$ 37.656,74</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">9</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 1.317,99</td> 
 
         <td>-R$ 1.795,66</td> 
 
         <td>R$ 35.861,09</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">10</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 1.255,14</td> 
 
         <td>-R$ 1.858,50</td> 
 
         <td>R$ 34.002,59</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">11</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 1.190,09</td> 
 
         <td>-R$ 1.923,55</td> 
 
         <td>R$ 32.079,03</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">12</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 1.122,77</td> 
 
         <td>-R$ 1.990,88</td> 
 
         <td>R$ 30.088,16</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">13</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 1.053,09</td> 
 
         <td>-R$ 2.060,56</td> 
 
         <td>R$ 28.027,60</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">14</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 980,97</td> 
 
         <td>-R$ 2.132,68</td> 
 
         <td>R$ 25.894,93</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">15</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 906,32</td> 
 
         <td>-R$ 2.207,32</td> 
 
         <td>R$ 23.687,61</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">16</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 829,07</td> 
 
         <td>-R$ 2.284,58</td> 
 
         <td>R$ 21.403,03</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">17</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 749,11</td> 
 
         <td>-R$ 2.364,54</td> 
 
         <td>R$ 19.038,50</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">18</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 666,35</td> 
 
         <td>-R$ 2.447,29</td> 
 
         <td>R$ 16.591,20</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">19</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 580,69</td> 
 
         <td>-R$ 2.532,95</td> 
 
         <td>R$ 14.058,25</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">20</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 492,04</td> 
 
         <td>-R$ 2.621,60</td> 
 
         <td>R$ 11.436,65</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">21</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 400,28</td> 
 
         <td>-R$ 2.713,36</td> 
 
         <td>R$ 8.723,29</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">22</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 305,32</td> 
 
         <td>-R$ 2.808,33</td> 
 
         <td>R$ 5.914,97</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">23</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 207,02</td> 
 
         <td>-R$ 2.906,62</td> 
 
         <td>R$ 3.008,35</td> 
 
         </tr> 
 
         <tr> 
 
         <td style="height:20px">24</td> 
 
         <td>-R$ 3.113,64</td> 
 
         <td>R$ 105,29</td> 
 
         <td>-R$ 3.008,35</td> 
 
         <td>-R$ 0,00</td> 
 
         </tr> 
 
        </tbody> 
 
        </table> 
 

 
        <div>I. O valor do saldo devedor no quarto per&iacute;odo &eacute; de R$ 35.861,09.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br /> II. Imediatamente ap&oacute;s o pagamento da segunda 
 
        parcela, Eduardo ter&aacute; pago 6,9% do capital total referente aos juros.<br /> III. O valor amortizado no s&eacute;timo pagamento &eacute; de R$ 1.676,26.<br /> IV. O processo de amortiza&ccedil;&atilde;o analisado &eacute; o Sistema 
 
        de Amortiza&ccedil;&atilde;o Constante - SAC.<br /> 
 
        <br /> 
 
        <strong>&Eacute; correto apenas o que se afirma em:</strong></div> 
 
       </div> 
 
       </p> 
 
       <ol type="A"> 
 
       <li> 
 
        <p>I e IV.</p> 
 
       </li> 
 
       <li> 
 
        <p>II e III.</p> 
 
       </li> 
 
       <li> 
 
        <p>I, II e III.</p> 
 
       </li> 
 
       <li> 
 
        <p>I, III e IV.</p> 
 
       </li> 
 
       <li> 
 
        <p>II, III e IV.</p> 
 
       </li> 
 
       </ol> 
 
      </div> 
 

 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 

 
</body> 
 

 
</html>

+0

請創建最小化,完整且可驗證的代碼。看看https://stackoverflow.com/help/mcve –

+1

如果你在「整頁」模式下測試你的代碼片段,你會發現問題嗎?當我在Windows 7上使用Chrome 60運行它時,在打印預覽中看不到重疊。 – ConnorsFan

+0

出於某種原因,打印時,「整頁」模式會在每頁中重複相同的HTML。我不知道它爲什麼這樣做......你可以將代碼複製到一個文件中,然後在Chrome上打開它以查看發生的錯誤。順便說一句,感謝您花時間 –

回答

0

這個bug被報告爲Chromium項目issue 621258。問題的狀態在2017年7月5日設置爲修復,但我在Windows 7上看到了Chrome 60.0.3112.113(最新版本截至2017年8月25日)中的問題。我添加了a comment以將您的情況他們的關注。

+0

謝謝你。 I –

+0

問題[759195](https://bugs.chromium.org/p/chromium/issues/detail?id=759195)針對此問題已打開,現在它已被標記爲「已修復」。 – ConnorsFan

相關問題