打印 html 页时垂直对齐表格

Question

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

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

目前，出于某种原因，这两个 table 并没有像我希望的那样位于页面上的确切位置（见下图）。

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; 规则指示浏览器在 table;

之后插入一个分页符

margin: auto; 规则水平对齐 canvas 上的 table。

我需要在同一张纸上双面打印两个 table，这样 table 就打印在彼此后面。

我现在拥有的：

如有任何帮助，我们将不胜感激！

Answer 1

所以我找到了没有 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 显示添加：

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

  @page { 
    size: A4 portrait;
  }
  }

它现在应该居中。

Answer 2

[提示]:

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

使用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>

Answer 3

这也许是一种可能的解决方案。我使用了您提供的 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` 打开打印对话框。

Here, I've selected 2 pages per sheet just for illustrative purposes to show the perfect alignment. When you do your printing, of course this would be set to one page per sheet (the default). Margins set to none (although auto will work fine too); and background graphics and header not selected.

<!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>

试试运行这个片段，进入全屏（在运行截图之后→“整页”（不 "Extend snippet"), 然后这样打印：同样，仅作为完整性检查（每页显示 2 个以检查对齐）：

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

打印 html 页时垂直对齐表格

vertically align tables when html page is printed

html

css

printing

通过 Chrome DevTools 显示

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

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