Is the table not displaying properly in the print preview with a messy

I have a large table with multiple rows. Due to its length, I have provided a link to the jsfiddle where you can view it: jsfiddle. The table is structured in HTML and contains many rows with various attributes.

<table>
<thead>text here!</thead>
<tbody>
Inside this are td elements with numerous tr structures, rowspan, and colspan
</tbody>

My goals are:

  • Ensure that the Thead always appears at the top of the printed page
  • Automatically initiate a page break for the first tr (MODEL as the starting td)

I have managed to find a solution for the first issue, but it seems messy as some td elements overlap on subsequent pages and get inside the Thead section. I am confused by this...

https://i.stack.imgur.com/inywN.png

If possible, I would like to know if there is a solution for automatic page breaks. I have searched for answers, but most require manually determining which tr should begin on a new page. Is there a way to automatically implement page breaks at the beginning tr of MODEL?

Thank you for your help. I understand that my question may seem basic, but I am truly stuck here.

htmlcsshtml-tablepage-break

Answer №1

If you want to expand your page, consider using the CSS3 @page property.

Your code snippet would resemble the following:

@media print {
@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
}
tr,td { page-break-before: always; }
}

I hope this information proves useful!

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

What method can I use to ensure that the sidebar stays fixed at a particular div as the user continues to scroll down the

Is there a way to automatically fix the sidebar once the user scrolls down and hits the top of the .Section2? Currently, I have to manually enter a threshold number which can be problematic due to varying positions across browsers and systems. Fiddle htt ...

javascriptjqueryhtmlcss

Names of VueJs components

Currently, I am coding in VueJS and encountering the following scenario <li @click = "selectedComponent = 'appManagment'"><i class="ion-clipboard"></i>Management</li> My goal is to have the name displayed as {{selectedCo ...

htmlvue.js

The browser does not support the display of Spanish special characters

I am working on a website and need to incorporate support for the Spanish language. I have prepared an XML file with both English and Spanish text. The XML file is being read based on the user's selection of language from a dropdown menu. Everything s ...

htmlxmlutf-8metaiso-8859-1

Integrating tilt and zoom functionality on a web page based on mouse movements

While browsing through some messages on chat, I came across something interesting: I noticed that as I moved my mouse left or right, the content would tilt in that direction, and when moving up and down, the content would zoom in or out. It was a really c ...

javascripthtmlcss-transitions

How to Detect Font Resizing in Google Web Toolkit (GWT)

I am trying to find a way in GWT to capture the font resize event that occurs when the user changes the size of the font by using Ctrl-Mouse Scroll or going to View -> Zoom. I have searched on Google and looked on StackOverflow but haven't found an ...

javascripthtmlgwtdom

Issues with redirection to registration page in PHP Slim framework

When I access localhost/path/home, it takes me to the homepage where I can either login or signup. Clicking on either option should redirect me to localhost/path/login or localhost/path/signup respectively for the login or signup page. However, there seem ...

htmlanchor

An error keeps popping up in the console saying "Module not found"

import React from 'react' import './sidebar.css' import logo from './images/' const sidebar = () => { return ( <div className='sideBar grid'> <div className='logoDiv flex&apo ...

cssnode.jsreactjsjsx

I am getting text content before the input element when I log the parent node. What is causing this issue with the childNodes

Does anyone know why 'text' is showing up as one of the childNodes when I console.log the parent's childNodes? Any tips on how to fix this issue? <div id="inputDiv"> <input type="text" id="name" placeholder="Enter the nam ...

javascripthtmlcssdomnodelist

What is the best way to use PHP strip_tags to filter out HTML and Script tags while keeping XML untouched?

I have been using the strip_tags() function in PHP to get rid of HTML tags from my text area input and to eliminate < script > tags for security reasons. However, I have run into an issue where the function ends up removing benign XML tags that are ...

phphtmlxmlstrip-tags

Creating a responsive div class that is centered

Struggling to center my <div class="loginfeld"> while keeping it responsive. <html> <body> <div class ="loginfeld"> <div class="container"> <div class="col-lg-4"></div> ...

htmlcssbootstrap-4

Creating a secure webpage that can only be accessed with a password

Is there a way to create a username/password login page using only client-side technologies without involving the server? Back in school, I was taught to use SQL and Java on the server side for this purpose. However, I'm now faced with a situation whe ...

htmlauthentication

The jQuery click function triggers immediately upon the loading of the page

Despite my best efforts to resolve this issue independently and conduct extensive research on Google, I am still unable to identify the root of the problem. It seems that the click function continues to activate upon page load. Kindly elucidate the under ...

javascriptjqueryhtmlcss

ejs-lineargauge major divisions and minor divisions centered

I've been trying to align majorTicks and minorTicks in the middle of the axis, but so far I haven't found a solution despite searching and googling extensively. Here's a snippet of my code: majorTicks: { height: 12, interval: 1, width ...

cssangularejs

How can I enable the "edit" function for a button within a list item?

I am currently working on a feature that allows users to edit list rows by clicking a button. However, I am facing an issue where the "edit" button only edits the first row instead of the matched line. This functionality is part of a program I am developi ...

javascripthtml

Maintaining the active status of section 1 after the page is refreshed using Javascript and CSS

I have a total of 3 buttons and 3 hidden sections available, which can be seen in the image below: click here for image description Whenever one of the buttons is clicked, the respective section transitions from being hidden to becoming visible: click he ...

javascripthtmlcss

Place an image in the middle of a div

Here are a few images for you to consider: <div class="builder-item-content row"> <div class="twelve columns b0" style="text-align:center;"> <ul class="upcoming-events"> <li> <a href="http://www.padi.com/scub ...

htmlcssimage

I am looking to implement screen reader capabilities for both the select-2 combo box and bootstrap's datetime-picker. How can I go about doing

On my existing website, I have select-2 combo boxes for drop-down lists and a Bootstrap Calendar widget. While these features work well, they lack accessibility for users with disabilities. In an effort to make the website inclusive for everyone, I am work ...

javascripthtmlaccessibilityscreen-readersangular-bootstrap-calendar

Create a dynamic and interactive website using a combination of jQuery and AngularJS

I recently came across an interesting tidbit on the FAQs of Angular stating that "Angular can use jQuery if it's present in your app when the application is being bootstrapped". This got me thinking, is it considered a best practice to include both j ...

javascriptjqueryhtmlangularjs

Having trouble getting my jQuery fade in effect to work

I am having an issue with the fade in / fade out effect using jQuery. The Menu is rendering perfectly and functioning properly, but there is no delay or fade when hovering over the menu items. I'm not receiving any errors, but the expected behavior is ...

jqueryhtml

A guide to accessing files and displaying their content by utilizing button clicks in PHP

Is it possible to navigate through the files in a folder by using buttons like Next and Previous, and then display the file contents within a table cell? Below is my attempted output, which unfortunately isn't functioning as expected: View Sample Ou ...

phparrayshtmlcsslaravel-5.3