"Text data will be automatically cut at the end of a page and continue

I encountered the following issue

As depicted in the image

  1. The data is not being displayed properly
  2. In the next td, the last character 3 is also printed on the next line
  3. Is it possible to avoid page footer and header without adjusting the page margin?

I searched extensively for a solution, but the following code did not work for me in both Google Chrome and IE9:

<style>
@media print
{
  body { font-size:small; font-family: myOpenSans, Tahoma; font-size:13px; color:#808080; display:table-row}
  table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }
}
</style>
jqueryhtmlcss

Answer №1

If you're not sure if this is the solution you're seeking, here's a way to open the printing dialog in Internet Explorer and specify certain values from an ActiveX control. You can also remove the footer and header of the page and adjust the margins as needed.

function printSpecial() {
    try {

        var html = '<HTML><HEAD>\n';
        if (document.getElementsByTagName != null) {
            var headTags = document.getElementsByTagName('head');
            if (headTags.length > 0)
                html += headTags[0].innerHTML;
        }
        html += '<BODY style="background-color: #ffffff;">\n';
        var printReadyElem = document.getElementById('content');
        if (printReadyElem != null) {
            html += printReadyElem.innerHTML;
        }
        else {
            alert('Could not find the printReady function');
            return;
        }
        html += '</BODY></HTML>';

        shell = new ActiveXObject("WScript.Shell");
        shell.sendKeys('%fu'); //brings up page setup
        shell.sendKeys("%a{TAB}.2{TAB}0{TAB}0{TAB}0{TAB}0{TAB}0{TAB}{UP}{TAB}{UP}{TAB}{UP}{UP}{UP}{UP}{TAB}{UP}{UP}{ENTER}");
        window.setTimeout("shell.SendKeys('%fp')",1000); // brings up print dialog
    } catch (e) {
        alert ("An exception occurred: " + e + "\nCode is: " + e.number + "\nDescription is: " + e.description);
        alert('Please verify that your print settings have a Landscape orientation.');
    }
}

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

The Django dilemma: Determining the right balance between using templates and letting code generate HTML

When working with Django templates, I wonder if it's better to have template "subroutines" or generate HTML within the code for certain cases. For instance, imagine a template with multiple lists of names that need to be converted into select element ...

pythonhtmldjangodjango-templates

Challenges with Scaling HTML5 Video onto Canvas

Attempting to extract a frame from an html5 video to generate a thumbnail, but encountering peculiar outcomes when the image is rendered onto canvas. The issue lies in the fact that the canvas displays only a greatly magnified portion of the video! Refer ...

javascriptjqueryhtml5-canvashtml5-video

Creating a CSS animation to repeat at regular intervals of time

Currently, I am animating an SVG element like this: .r1 { transform-box: fill-box; transform-origin: 50% 50%; animation-name: simpleRotation,xRotation; animation-delay: 0s, 2s; animation-duration: 2s; animation-iterat ...

javascriptcsssvgcss-animations

Revolving mechanism within React.js

I am currently developing a lottery application using React.js that features a spinning wheel in SVG format. Users can spin the wheel and it smoothly stops at a random position generated by my application. https://i.stack.imgur.com/I7oFb.png To use the w ...

javascriptcssreactjs

immutable chrome sqlite data objects

I have been utilizing a sqlite DB as the storage system for a web application. I have been directly using the objects returned from queries in my application. For instance: function get_book_by_id(id,successCallback,errorCallback) { function _successC ...

javascriptsqlitehtmlgoogle-chrome

Assign a class to the checkbox of the first parent

I have a set of checkboxes generated using a for loop. I want the first checkbox to act as a parent, and all other checkboxes should act as children. When the parent checkbox is clicked, all child checkboxes should be checked. Although I have code to achi ...

jqueryhtmlcss

Unable to modify the border radius of the carousel indicators in Bootstrap 5

Currently, I am working with the carousel component in Bootstrap 5.1. I have encountered an issue where I am unable to add border-radius to the carousel indicators, despite trying various methods. Even though the inspector shows that the indicators (HTML ...

cssbuttoncarouselbootstrap-5border-radius

What is the best way to locate the offspring of a parent div using its data attribute?

If I have a container div called dvMainDiv with multiple child divs inside it, all added programmatically, how can I retrieve a specific child div based on its data-id attribute? <div id="dvMainDiv" class="dvMainDiv"> <div id="dvChildDiv" cla ...

javascriptjqueryhtml

Aggregate the data entered into input fields on one page and display them on a separate page

Can you help me with this task? - I have 2 pages set up (page 1 has input fields & page 2 is where the entered data should be displayed) - I want to retrieve all the text input from the first field and insert it into the "content" tag on the second page. ...

javascriptjqueryhtml

.htaccess 404 not redirecting properly

I need help with the following code snippet: # Keep this line intact for mod_rewrite rules to function properly RewriteBase / ErrorDocument 404 /errors/404.php Despite having the file 404.php in the errors folder, it doesn't seem to be working as ...

html.htaccess

What is the best way to customize the color of the icon in the <v-text-field>?

I have a <v-toolbar> component and I am trying to customize it by adding a search text field with a search icon in front: <v-text-field ...

cssvue.jsvuetify.js

Display the elements of a div at a reduced size of 25% from its original dimensions

I'm currently developing a JavaScript-based iOS simulator that allows users to view their created content on an iPhone and iPad. This involves using AJAX to load the content/page into the simulator, but one issue is that the simulator isn't life- ...

javascripthtmlioscssios-simulator

Learning how to access my CSS file using Express and Node.js

I am new to using express and node.js. I am trying to develop my app, but for some reason, my style.css file is not being recognized and I am unsure why. Initially, I attempted to use .scss files, but after researching, I discovered that it was not possi ...

javascripthtmlcssnode.jsexpress

How can I adjust the alignment of my menu items to be centered without using flexbox?

Even though I've searched extensively on how to center text horizontally, none of the suggestions have worked for me. I attempted using margin-left: auto, margin-right: auto, and text-align: center for the class nav-center, but none of them had the de ...

htmlcss

What is the proper way to leverage the global 'window' object within Angular?

I'm attempting to utilize the method "window["initMapCallback"]" to invoke and monitor for "initMapCallback" in a separate file. However, I am encountering an error message in the debugging console that states Query - How can I properly implement thi ...

javascripthtmlangularcallbackasynccallback

The image in the footer seems to have a mind of its own, refusing to stay put and instead choosing to wander

Is it possible to add a small icon at the bottom of the footer that scrolls up or down as I scroll, instead of remaining fixed? I'm unsure if the issue lies in setting the image as sticky on scroll or if it's a CSS error. I attempted to set the ...

htmlcss

What is the best way to apply maximum height to an element using CSS?

Looking for help with my website: I made some changes in the code using Firebug and identified these elements that I want to modify (but changes are not live yet) The following code represents the elements on my site: This is the HTML code: <di ...

htmlcsstwitter-bootstrap

Angular's browser animation feature allows for smooth slide-up animations from the bottom

I have been experimenting with creating a simple animation, and it's working, but in the opposite direction of what I intended. I want the div to open from bottom to top and close from top to bottom. Here is my animation code in Angular: animations: ...

cssangularanimationtypescss-animations

Delete the parent div when the button is clicked

trying to create a dynamic button system to add/remove inputs on clicks. I have the addButton working but not the deleteButton. What am I missing? $(document).ready(function() { var maxFields = 20; var addButton = $('#plusOne'); va ...

javascriptjqueryhtml

Ways to display an image overlay on hover using sprite sheets

Is there a way to make a line appear, around 10px in size, when hovering over an image at the bottom of that image? I came across this effect on MTV's website within their "You would also like these" section below each post. They utilized css-backgro ...

htmlcsscss-sprites