在 Google Chrome 中打印表格时,内容与标题重叠

2023-11-23

我在打印包含 HTML 代码的表格时使用 Google Chrome 遇到问题。我需要创建一个带有标题的文档,为了实现这一点,我使用带有 thead 元素的表格,因此浏览器将为打印文档的每个页面复制它。

问题是当我在页面中有分页符时,内容与标题重叠<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>

该错误被报告为问题 621258在 Chromium 项目中。问题的状态设置为Fixed2017年7月5日,但我在Windows 7上的Chrome 60.0.3112.113(截至2017年8月25日的当前版本)中看到了该问题。我添加了一条评论提请他们注意您的案件。

问题759195几天后针对该问题打开了,并标记为Fixed不久之后。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Google Chrome 中打印表格时,内容与标题重叠 的相关文章

随机推荐

  • 将数据框的两列转换为命名向量

    我需要转换多行两列data frame到一个命名的字符向量 我的data frame会是这样的 dd data frame crit c a b c d name c Alpha Beta Caesar Doris 我真正需要的是 what
  • 是否可以以编程方式抛出 APPWIDGET_UPDATE 的意图?

    想要我的小部件中的一个按钮来触发小部件类上的 APPWIDGET UPDATE 意图以强制更新 但我没有将 APPWIDGET UPDATE 视为意图中的静态字段 这可能吗 如何做到这一点 Intent intent new Intent
  • 如何更改列表框项目的文本?

    我有一个Listbox充满了项目 我需要更改项目的文本 使用项目配置我只能找到如何更改颜色 如何更改 Tkinter 上的项目文本Listbox 要更改文本 您必须删除并在正确的索引处重新添加项目 这是一个不断更新列表框中第二项的人为示例
  • android studio 错误:无法启动守护进程

    Android Studio 2 2版本 操作系统版本 Windows 10 Java JRE JDK版本 1 8 0 51 错误 无法启动守护进程 这个问题可能是守护进程配置不正确造成的 例如 一个使用了无法识别的 jvm 选项 请参阅用
  • 何时应用数据绑定?

    在对象生命周期的什么时间第一次解析绑定 这是一个简单的问题 但我在书籍和谷歌上都找不到任何信息 其实事情没那么简单 你不会得到这个问题的直接答案 这取决于上下文 这是两个简单的例子 如果有界属性由不在 ControlTemplate 内的
  • 在 Ionic 2 中禁用侧边菜单的滑动打开登录页面(或任何页面)的手势

    我是 Ionic 2 和 Angular2 的新手 我已经使用以下命令下载了新的 Ionic 模板 Ionic start appname sidemenu v2 ts 对于这个特定的解决方案 我添加了一个登录页面来验证用户 验证成功后 用
  • 更改轴而不更改数据 (Python)

    我如何绘制一些数据 删除由该数据创建的轴 然后用不同比例的轴替换它们 假设我有类似的东西 import matplotlib pyplot as plt fig plt figure ax fig add subplot 111 plt x
  • Nginx + (nodejs、socketio、express) + php 站点

    我正在开发一个完全 js HTML5 画布游戏 并希望它是 实时 的 根据我的研究 我发现 Node js 是一个令人兴奋的前景 因此我在我的 ubuntu 12 Web 服务器上使用 socket io express 等配置了它 我是一
  • 如何在 PyCharm 中运行 Flask shell?

    我在 PyCharm 中创建了新的 Flask 项目 但我看不到如何在集成的 PyCharm python 控制台窗口中运行 Flask shell Name app is not defined when start console 我仍
  • 将 RSA 加密参数从 CRT(中国剩余定理)映射到 .NET 格式

    我需要使用 C 实现 RSA 加密 解密 我有一个带有以下参数的私钥 mod n exponent p q dP dQ and p 1mod q 上述参数的解释见中文余数算法 然而 RSA 的 C NET 实现具有不同的参数集 如下所示 M
  • 使用 JavaScript 控制 Flash Player

    我希望能够在与 Flash 组件相同的页面中使用 JavaScript 控制 Flash 电影流 包括 播放和暂停流 改变流 我已经可以加载播放器并设置 flash 参数 但我不知道流开始后如何与播放器交互 是否可以在不修改当前用于播放电影
  • 电子“要求未定义”

    我正在制作一个应用程序 我需要授予对文件系统 fs 模块的访问权限 但是即使使用nodeIntegration启用渲染器给我这个错误 Uncaught ReferenceError require is not defined 我能找到的所
  • Meyers 的单例模式实现线程安全吗?

    以下是使用延迟初始化的实现Singleton 迈耶斯的单例 线程安全吗 static Singleton instance static Singleton s return s 如果不是 为什么以及如何使其线程安全 In C 11 它是线
  • 编辑 UITextField 时如何关闭键盘

    我知道当我想关闭键盘时 我需要告诉我的 UITextField 退出第一响应者 但我不确定如何知道用户何时按下键盘上的 完成 键 有我可以留意的通知吗 我设置了代表UITextField to my ViewController class
  • 多维长度数组反射java

    如何在java上使用反射找到多维数组的长度 多维数组没有 长度 这个概念 它可能不是矩形的 我猜你说的是维数 您需要迭代地深入其中并进行计数 public int getDimensionCount Object array int cou
  • 在SSH.NET中执行长时间命令并在TextBox中连续显示结果

    有没有办法在 Windows 应用程序 如 PuTTY 中执行 Linux 命令并将结果显示在文本框中 例如我正在尝试执行以下命令 wget http centos webpanel com cwp latest sh cwp latest
  • Web API 中的异常处理

    在我的 Web API 项目中 我创建了子项目 类库 在其中处理实际的数据处理操作 我的后端数据库是DocumentDB 我的问题是如何告诉我的 Web API 操作方法我在类库的数据方法中可能遇到的任何错误 一旦我的 Web API 方法
  • 当应用程序处于后台时,NSTimer 的行为是什么?

    我知道当您后台应用程序时 计时器会停止运行 然而 当你从后台回来时 行为是什么 定时器是否保持原来的状态fireDate 我遇到了一个问题 即从后台返回并设置十分钟后触发的 NSTimer 时 有时我会立即让计时器在之前触发applicat
  • 在 RawContacts 中找不到 Facebook 联系人

    我正在尝试构建一个联系人管理应用程序 我的手机上有多个帐户的联系人 包括 Facebook 和 HTC Facebook 由于某种原因 我无法从RawContacts表的ContactsContract managedQuery Conta
  • 在 Google Chrome 中打印表格时,内容与标题重叠

    我在打印包含 HTML 代码的表格时使用 Google Chrome 遇到问题 我需要创建一个带有标题的文档 为了实现这一点 我使用带有 thead 元素的表格 因此浏览器将为打印文档的每个页面复制它 问题是当我在页面中有分页符时 内容与标