Printing table with charts in html through FireFox

By : Donvino
Source: Stackoverflow.com
Question!

I have a next problem:
I have a table with charts inside and tables, it is well displayed in the browsers. But when I try to print it(I need to print it to pdf) in mozila 3rd speedometr is being cut so it displays only 2.5 speedometrs.
Option "shrink to fit" doesn't help, if scale is 100% I have the problem, if I put 70% or less-I can see all 3 speedometrs, but the other text is too small. Other tables and content render perfectly depending on scale. Is there any way to solve this problem? This is about FireFox browser- I need exactly him, but I've tried in Chrome too-there he just uses autoscale but still it makes about 70% sacle.
So is there any way to scale charts while printing? Setting exact px size of chart would be bad idea for my problem.
Here is the link to speedometrs table of charts I think the problem is that JS is runned only once when it's drawing the page and after that it isn't scaling.
The css file:

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

And the html file (js you can find in the 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>
By : Donvino


Answers
Try adding a print @media query to your stylesheet and adjust the width of your containers:

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


If your work is being cut off, add empty div at set points between your code to make sure it keeps certain content to each printed page.

add this css to the blank divs:

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


This video can help you solving your question :)
By: admin