【问题标题】：vertically align tables when html page is printed打印html页面时垂直对齐表格
【发布时间】：2021-12-01 01:39:33
【问题描述】：

我有两张尺寸为 7cm×15cm 的表格，我想使用浏览器的打印工具中的“保存为 PDF”选项将它们导出为 A4 纵向纸大小的 pdf 文件。

理想情况下，我想在 A4 纸上将两个表格垂直居中。但如果这不可能，我希望它们位于页面中的同一位置。

目前，由于某种原因，这两个表格并未按我希望的那样定位在页面上的确切位置（见下图）。

html代码如下：

<body>
<!-- 1st table: -->
<table>
<tr> <td>content of the first table</td>
<!-- some other tr's and td's -->
</tr>
</table>
<!-- 2nd table: -->
<table>
<tr> <td>content of the second table</td>
<!-- some other tr's and td's -->
</tr>
</table>

</body>

连同以下css规则：

table {width:7cm; height:15cm; border: 1px solid;
  page-break-after: always;
  margin: auto;
  }
@media print {
  @page { size: A4 portrait; }
  }

page-break-after: always; 规则指示浏览器在表格后插入分页符；

margin: auto; 规则水平对齐画布上的表格。

我需要将两张表格打印在同一张纸上，进行双面打印，以便将表格打印在彼此的后面。

我现在拥有的：

任何帮助将不胜感激！

【问题讨论】：

打印 HTML 数据表格的最有效方法是使用可以从表格创建 PDF 文档的 JavaScript 库。不要依赖浏览器的“打印到 PDF”功能，因为要生成格式良好的 PDF 并不容易。
@daddygames 我不想使用 javascript。
祝你好运。
@daddygames 又想了想，能否请您提一下库名称？我对js不是很熟悉，但我最好看看它。
我已经有一段时间没有使用 JS 工具来完成这项任务了，因为我通常使用 API 服务器来代替。我最近对这种特定类型的任务的经验是使用Datatables JS。快速搜索似乎指向jsPDF 也是一个流行的库，它可以为您提供除 html 表格之外的更多选择。

标签： html css printing

【解决方案1】：

这也许是一种可能的解决方案。我使用了您提供的准确的 HTML 和 CSS，并简单地添加了一个 transform 技巧，以确保对象完美居中：

<html><head>
    <title>Two Centered Tables</title>
    <style>
        table {
                width: 7cm;
                height: 15cm;
                border: 1px solid;
                page-break-after: always;
                margin: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
        }

        @media print {
                @page {
                        size: A4 portrait;
                }

        }
    </style>
</head>
<body>

        <!-- 1st table: -->
        <table>
            <tbody>
                <tr>
                    <td>content of the first table</td>
                    <!-- some other tr's and td's -->
                </tr>
            </tbody>
        </table>
        <!-- 2nd table: -->
        <table>
            <tbody>
                <tr>
                    <td>content of the second table</td>
                    <!-- some other tr's and td's -->
                </tr>
            </tbody>
        </table>


</body></html>

通过 Chrome DevTools 显示

只需使用`ctrl/cmd-P` 打开打印对话框。

在这里，我为每张纸选择了 2 页，仅用于说明目的，以显示完美对齐。当您进行打印时，这当然会设置为每张纸一页（默认设置）。边距设置为无（尽管 auto 也可以正常工作）；和背景图形和标题未选择。

<!DOCTYPE html>
<html>
<head>
    <title>Two Centered Tables</title>
    <style>
        table {
                width: 7cm;
                height: 15cm;
                border: 1px solid;
                page-break-after: always;
                margin: 50% 50% 50% 50%;
                transform: translate(-50%, -50%);
                text-align: center;
        }

        @media print {
                @page {
                        size: A4 portrait;
                }

        }
    </style>
</head>
<body>
    <div style="display: grid;">
        <!-- 1st table: -->
        <table>
            <tbody>
                <tr>
                    <td>content of the first table</td>
                    <!-- some other tr's and td's -->
                </tr>
            </tbody>
        </table>
        <!-- 2nd table: -->
        <table>
            <tbody>
                <tr>
                    <td>content of the second table</td>
                    <!-- some other tr's and td's -->
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

尝试运行这个sn-p，进入全屏（运行snipper →“Full Page”（不是“Extend sn-p”），然后打印像这样：同样，仅作为完整性检查（每页显示 2 个以检查对齐）：

这可能是因为以厘米为单位的硬编码，当您运行此代码时，它对您不起作用；所以它确实取决于你得到的显示器的实际尺寸（如果你以厘米[或像素？]为单位对宽度和高度进行硬编码？）。有人能解释一下吗？

【讨论】：

我刚试过你的解决方案，this is the outcome.
您的方法看起来很有希望，但由于某种原因我无法使其发挥作用。
这有所不同，但仍然没有居中对齐。 image
让我们continue this discussion in chat.

【解决方案2】：

[提示]：

@tush，我们可以按照你在 cmets 中提到的那样做。由于高度已知并且容器（主体）高度已知，因此我们可以通过“手动”定位来修复它们。

使用 margin: 6cm auto; 。请看下面的示例。

[结果]：

Centred PDF file

[HTML/CSS 代码]：

table {width:7cm; height:15cm; border: 1px solid;
  page-break-after: always;
  margin: 6cm auto;
  }
@media print {
  @page { size: A4 portrait; }
  }

<body>
<!-- 1st table: -->
<table>
<tr> <td>content of the first table</td>
<!-- some other tr's and td's -->
</tr>
</table>
<!-- 2nd table: -->
<table>
<tr> <td>content of the second table</td>
<!-- some other tr's and td's -->
</tr>
</table>

</body>

【讨论】：

有效。确实很简单！
@tush，我真的很抱歉，我不是那个意思。

【解决方案3】：

所以我找到了没有 javascript 的修复程序。将您的打印媒体更改为：

@media print {
    body {margin-top:0 !important;}
  @page { size: A4 portrait; }

  }

编辑以使表格居中：
您必须将表格包装在这样的 div 中：

<body>
    <!-- 1st table: -->
    <div class="page">
    <table>
    <tr> <td>content of the first table</td>
    <!-- some other tr's and td's -->
    </tr>
    </table>
  </div>
    <!-- 2nd table: -->
    <div class="page">

    <table>
    <tr> <td>content of the second table</td>
    <!-- some other tr's and td's -->
    </tr>
    </table>
    </div>
    </body>

然后在 css 中为 flex display 添加这个：

@media print {
    body {margin-top:0 !important;}
    .page{
      height: 100vh;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }

  @page { 
    size: A4 portrait;
  }
  }

它现在应该居中。

【讨论】：

非常感谢！正如我在附图中指出的那样，它确实修复了表格的位置。你能想出一种方法把它也放在页面中间吗？我遇到了这个page。我从中了解到的是，如果块元素（在本例中为表格）高度已知并且容器（主体）高度已知，那么我需要使用“填充顶部”或类似的东西“手动”定位它。你能想出不同的方法吗？
我已经编辑了我的回复并添加了居中。我认为使用 display: flex;比使用填充和手动计算宽度更好。
顺便说一句，我不明白为什么添加!important 有任何效果。当我使用检查元素工具“渲染”中的“模拟 [the] css 媒体类型”并查看这两个表时，无论是否进行更改，它们都具有相同的 css 计算值。
Right now important 没有做任何事情，但是由于可以从您或从引导程序等库应用到正文的其他 css 样式，!important 覆盖它们并使该样式优先通过浏览器。
@tush 你能接受答案吗？

通过 Chrome DevTools 显示

只需使用ctrl/cmd-P 打开打印对话框。

只需使用`ctrl/cmd-P` 打开打印对话框。