在 Google Chrome 中打印表格时,内容重叠 header

When printing tables in Google Chrome, content overlaps header

我在使用 Google Chrome 打印带有 HTML 代码的 table 时遇到问题。我需要创建一个带有 headers 的文档,为此,我使用了带有 thead 元素的 table,因此浏览器会为打印文档的每一页复制它。

问题是当我在 <tr> 元素内有分页符时,内容与 header 重叠。紧随问题的打印和代码的要点。

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>

该错误已报告为 issue 621258 in the Chromium project. The status of the issue was set to Fixed on July 5, 2017, but I see the problem in Chrome 60.0.3112.113 (the current version as of August 25, 2017) on Windows 7. I added a comment 以提请他们注意您的情况。

几天后针对该问题打开了 759195 问题,并在不久之后将其标记为 已修复