嵌套 HTML 表格错误，打印预览 IE 中的分页符附近缺少表格答案

【问题标题】：Nested HTML tables error, missing table near page break in print preview IE嵌套 HTML 表格错误，打印预览 IE 中的分页符附近缺少表格
【发布时间】：2023-04-03 06:04:02
【问题描述】：

在我工作的公司中，我们生成 html 格式的报告，我们的客户经常打印这些报告。我们遇到的问题是，有时当客户端打印时，内部表格之一将在打印视图中的分页符之前 1 或 2 个像素开始。这会导致表格消失但空间被占用。

<HTML>
  <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test</title>
    <style type="text/css">
      td { border:1px solid black;}
      table {border-collapse:collapse;}
    </style>
  </HEAD>
  <BODY>
    <TABLE class="main">
      <TR>
        <TD>
          <TABLE class="second">
            <TR>
              <TD style="border-top:824px solid-black">1</TD>
            </TR>
            <TR>
              <TD>1_1</TD>
            </TR>
            <TR>
              <TD>1_2</TD>
            </TR>
            <TR>
              <TD>1_3</TD>
            </TR>
          </TABLE>
        </TD>
      </TR>
      <TR>
        <TD>
          <TABLE class="second">
            <TR>
                  <TD>2</TD>
            </TR>
            <TR>
              <TD>2_1</TD>
            </TR>
            <TR>
              <TD>2_2</TD>
            </TR>
            <TR>
              <TD>2_3</TD>
            </TR>
          </TABLE>
        </TD>
      </TR>
      <TR>
        <TD>
          <TABLE class="second">
            <TR>
              <TD>3</TD>
            </TR>
            <TR>
              <TD>3_1</TD>
            </TR>
            <TR>
              <TD>3_2</TD>
            </TR>
            <TR>
              <TD>3_3</TD>
            </TR>
          </TABLE>
        </TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

上面的代码应该会重现该错误，但您可能需要在边框上添加一些填充，以将第二个表格撞到分页符之前。

我们尝试了分页符、填充、边框折叠、无边框折叠。当它只是两个表格时，除了单元格的边框之外没有任何样式时，该错误似乎仍然存在。这似乎是一个相当大的缺陷，但我几乎没有找到任何关于它的东西。

这是 IE 的问题还是我们可以做些什么来解决这个问题？

编辑我们尝试使用尽可能简单的框架（仅 TD 元素上的边框），但遇到了同样的问题。

我们无法解决问题，但我们的工作包括仅使用外部表格的一个单元格并将每个内部表格放入其中。这可以防止表格在分页符附近消失。

【问题讨论】：

事实证明，即使没有边框崩溃，我们仍然可以复制问题
你有什么样的疯狂数据结构来证明嵌套表的合理性？（或者它们是不合理的布局表？）
page-break-after 这样的 CSS 样式在表格中也不能很好地工作。你真的应该尝试找到一个没有大表的解决方案。
从 HTML 服务器端生成 PDF 文件比依赖浏览器正确打印要可靠得多。

标签： html internet-explorer printing html-table

【解决方案1】：

我们在使用嵌套表格布局的业务应用程序中遇到了与 IE7 和 IE8 完全相同的问题。根据我们对受影响样本的测试证据，Internet Explorer 11 不存在此问题。

这是 IE 中的一个错误，根据 Microsoft 技术支持，它存在于 IE 10 之前的版本中，并且也反映在许多 PDF 打印机使用的 Print-to-PDF 功能中，这是我们首先找到该错误的方式。

很遗憾，我无法提供任何证据证明我所说的。请检查 IE11 并确认它是否解决了您的问题。如果您还不愿意切换浏览器，另一种选择是使用基于 div 的布局对其进行测试。

【讨论】：