通过 FireFox 打印带有 html 图表的表格

Question

我还有一个问题：
我有一个表格，里面有图表和表格，它在浏览器中显示得很好。但是当我尝试在 mozila 中打印它（我需要将它打印为 pdf）时，第 3 速度计正在被剪切，因此它只显示 2.5 个速度计。
选项“缩小以适应”没有帮助，如果比例为 100% 我有问题，如果我放 70% 或更少 - 我可以看到所有 3 个速度计，但其他文本太小。其他表格和内容根据比例完美呈现。有没有办法解决这个问题？这是关于 FireFox 浏览器的——我完全需要他，但我也在 Chrome 中尝试过——他只是使用自动缩放，但它仍然可以产生大约 70% 的 sacle。
那么有没有办法在打印时缩放图表？设置图表的精确像素大小对我的问题来说是个坏主意。
Here is the link to speedometrs table of charts 我认为问题在于 JS 在绘制页面时只运行一次，之后就不再缩放。
css 文件：

.container
{
    width:33%;
    border:0px solid black;
}
.speedometr
{
    width:80%;
    margin-left: auto;
    margin-right: auto;
}

还有html文件（js可以在link找到）：

<table class="speedometr" >
    <tr>
        <td id="container" style= "width: 33%; height: 33%"></td>
        <td id="container1" style= "width: 33%; height: 33%"></td>
        <td id="container2" style= "width: 33%; height: 33%"></td>
    </tr>
<tr></tr>
<td class="container">
<table class="speedometr_tables">
    <tr>
        <td align=center bgcolor="DDDFFF">
            <B>1</B>
        </td>
        <td align=center bgcolor="DDDFFF">
            From(h:mm)
        </td>
        <td align=center bgcolor="DDDFFF">
            Up to(h:mm)
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="55BF3B">
            <B>Ideal</B>
        </td>
        <td align=center>
            0:00
        </td>
        <td align=center>
            01:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DDDF0D">
            <B>Optimal</B>
        </td>
        <td align=center>
            01:00
        </td>
        <td align=center>
            02:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DF5353">
            <B>Critical</B>
        </td>
        <td align=center>
            02:00
        </td>
        <td align=center>
            03:00
        </td>

    </tr>
    </table>
    </td>
    <td class="container">
<table class="speedometr_tables">
    <tr>
        <td align=center bgcolor="DDDFFF">
            <B>2</B>
        </td>
        <td align=center bgcolor="DDDFFF">
            From(h:mm)
        </td>
        <td align=center bgcolor="DDDFFF">
            Up to(h:mm)
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="55BF3B">
            <B>Ideal</B>
        </td>
        <td align=center>
            0:00
        </td>
        <td align=center>
            100:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DDDF0D">
            <B>Optimal</B>
        </td>
        <td align=center>
            100:00
        </td>
        <td align=center>
            200:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DF5353">
            <B>Critical</B>
        </td>
        <td align=center>
            200:00
        </td>
        <td align=center>
            300:00
        </td>

    </tr>
    </table>
    </td>

    <td class="container">
<table class="speedometr_tables">
    <tr>
        <td align=center bgcolor="DDDFFF">
            <B>3</B>
        </td>
        <td align=center bgcolor="DDDFFF">
            From(h:mm)
        </td>
        <td align=center bgcolor="DDDFFF">
            Up to(h:mm)
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="55BF3B">
            <B>Ideal</B>
        </td>
        <td align=center>
            0:00
        </td>
        <td align=center>
            100:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DDDF0D">
            <B>Optimal</B>
        </td>
        <td align=center>
            100:00
        </td>
        <td align=center>
            200:00
        </td>

    </tr>
    <tr>
        <td align=center bgcolor="DF5353">
            <B>Critical</B>
        </td>
        <td align=center>
            200:00
        </td>
        <td align=center>
            300:00
        </td>

    </tr>
    </table>
    </td>
</table>

Answer 1

尝试在样式表中添加 print @media 查询并调整容器的宽度：

@media print {
  .container {
    width: 20%;
  }
}

Answer 2

如果您的工作被中断，请在代码之间的设置点添加空 div，以确保每个打印页面都保留某些内容。

将此css添加到空白div中：

@media print
{
.blankdiv {page-break-after:always}
}