Generating HTML tables with charts using FireFox

I am encountering an issue:
My table contains charts and tables that are displayed correctly in browsers. However, when I attempt to print it (as a PDF) in Mozilla Firefox, the third speedometer gets cut off, showing only 2.5 speedometers.
 Using the "shrink to fit" option does not solve the problem. If the scale is at 100%, the issue persists. When scaled down to 70% or less, all three speedometers are visible, but other text becomes too small. Other tables and content adjust perfectly based on the scale. Is there a solution to this problem? I specifically need it to work in FireFox, but I also tested it in Chrome where it auto-scales to about 70%.
Is there a way to scale the charts when printing? Setting a specific pixel size for the chart would not be ideal for my situation.
Here is the link to the speedometer table of charts I suspect the issue lies in the fact that JavaScript runs only once during page rendering and then does not scale afterward.
The CSS stylesheet:

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

And the HTML file (JavaScript can be found in the link):

<table class="speedometer" >
    <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="speedometer_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="speedometer_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>
javascripthtmlcssfirefoxhighcharts

Answer №1

To enhance your layout for printing, consider implementing a print @media query in your CSS file to modify the width of your containers:

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

Answer №2

To prevent your work from being cutoff, insert empty div elements at specified intervals within your code to ensure that specific content remains on each printed page.

Apply the following CSS to the empty divs:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update the user information by using its unique identifier at a specific location

I am currently working on editing user data with a specific MongoDB instance. When I click on the user's details, a modal popup appears with an update button below it. My goal is to have the user data updated when this button is clicked for the partic ...

javascriptnode.jsmongodbexpressecmascript-6

Guide to utilizing Terser in conjunction with webpack

I am currently using Webpack 6.10.2 in combination with Vue 3.9.3. I encountered an issue with Uglify.js when running npm run build due to its inability to handle ES6 code. To work around this problem, I followed the recommendation of removing Uglify fro ...

javascriptnode.jsvue.jswebpackterser

When a child component is updated, React does not automatically re-render

My goal is to pass the email from the SigninForm back to the App component and trigger a re-render when the email is updated. I attempted to follow the structure outlined in a previous question on Stack Overflow, but unfortunately, I couldn't get the ...

javascriptreactjs

Issue with ellipsis not functioning correctly on dynamic placeholders when they are in focus

When I focus on my dynamic placeholder input, the text-overflow: ellipsis property is lost for some reason. However, it is regained when blurred. Can anyone explain why this is happening? If you want to experiment with it, I have set up a stackblitz: htt ...

htmlcssangular

What is the best way to showcase an ajax response on an HTML webpage?

Apologies for the length of the code, but I'm looking to condense it while maintaining the same functionality. Is there an alternative approach or method that could achieve the same results? I receive data from PHP, which is then passed to JavaScript ...

javascriptphpjqueryhtmlajax

While running tests on a React project, the `npm test` command is successful, but unfortunately,

I created a new react app using create-react-app and included some basic components and tests. The tests work fine when running 'npm test', but I encounter an 'Unexpected token' error when using Jest to run the tests with imported compo ...

javascriptnode.jsreactjsjestjs

Questions regarding prototype-based programming in Javascript

I am interested in achieving the following using Javascript: function A(){ this.B = function() { ... }; this.C = function() { <<I need to call B() here>> } ; }; I came across a method of method overloading, but I am curious to know ...

javascript

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

javascriptcssangulartypescriptbootstrap-4

Is there a way to avoid waiting for both observables to arrive and utilize the data from just one observable within the switchmap function?

The code snippet provided below aims to immediately render the student list without waiting for the second observable. However, once the second observable is received, it should verify that the student is not enrolled in all courses before enabling the but ...

javascriptangularrxjsobservableswitchmap

Is Ember CLI experiencing issues due to the latest Ember Data update?

Greetings! I am a beginner with Ember and recently encountered some warnings after upgrading to the latest version of Ember Data: Update: I have two identical versions of my app, one built without ember-cli and the other with ember cli. Both applications ...

javascriptember.jsember-datafirebaseember-cli

Discover the Optimal Approach to Implementing Callback Function with JSON Using Javascript and Jquery

I have a function that looks like this : <script> function sticky(json){something here} </script> Now, I would like to utilize Jquery to invoke this function and display its output within a specific div element with the ID of "stickid". H ...

jqueryhtml

When generating JSON data, be sure to specify the file type as "File" rather than using

Recently, I was following a tutorial on Node.js and JSON. In the tutorial, it was mentioned that after creating a JSON object and using the filesystem (fs) module to create a JSON file by stringifying it, the file is created with the type 'File' ...

javascriptnode.jsjson

Sorting through an array of objects based on a key and value that match another object

Is it possible to filter or query an array with the following structure? [ { 'xml:id': 'Name1', sex: { '$t': 'M' }, occupation: { n: 1 ...

javascriptnode.js

Discover the most concise string within the array

Is there a way to determine the shortest string in a JavaScript array regardless of the number of elements it contains? I attempted using var min = Math.min(arr[0].length,arr[1].length,arr[2].length); to find the shortest string among 3 elements in an ar ...

javascriptarrays

Elevate your website's design with Vue and create eye-catching CSS

I've been working on a Vue hamburger menu component, but I'm facing an issue with the animations. The animation process seems to reach the desired end result, yet there is no actual animation displayed. The animation triggering is done through a ...

javascriptanimationvue.jscss-animations

Ways to implement div on hover in my table's td cells

Here is the HTML table code I have: <table border='1px'> <tr> <td id='td'>first</td> <td>last</td> <tr> <td id='td'>newFirst</td> <td>newSecond</td> </t ...

jqueryhtmlcsshover

JavaScript / html Error: function body missing closing curly brace

I encountered an error that I'm struggling to resolve: "SyntaxError: missing } after function body". Despite not having a function named 'body', I have attempted changing every instance of 'body' in my script. However, ...

javascripthtmlsyntax-error

Is it possible to use CSS and HTML to rotate a cube and expand its sides?

I am attempting to rotate the cube and expand its faces. I have experimented with the following code: .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .cube-wrap { width: 40px; height: 40px; ...

htmlcss

What are the steps to start a project on a personal computer?

Utilized on   - Windows 7, 64-bit I am interested in exploring how the project functions with github.com - project. Query: How can I get the project to do this? Steps Taken:   1. Saved the project to the directory. c:\test\visualStudio ...

javascriptnode.js

I am seeking to redirect to a different page within an ejs template by clicking on a link

I am having trouble navigating to the next page using a link and keep getting a 404 error. I recently switched my template from jade to ejs. <html> <body> <div> <ul style="color:white; float: right;" class="nav navbar-nav ...

javascriptnode.jsexpress