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

Please tap to dial: Access to navigation is restricted

Trying to add a click-to-call link with the following code: <a href="tel:+4912345678912">Tel: +4912345678912</a> Despite Google developers saying it should work, major mobile browsers are blocking the navigation when clicking on the link. It ...

javascripthtmlbrowsertel

Create a CSS style to set the background with a half height positioned behind the

I am looking to create a div with a background and overlay effect. Here is what I have done so far: I want it to look like this: body { background: blue; } .wrap { height: 300px; width: 600px; margin: 0 auto; background-color: #000000; } .b ...

htmlcss

Adding a linear gradient with a fade effect to Highcharts sparkline chart: Step by step guide

I am working with a Highcharts sparkline chart, and the design in my Figma file resembles the image provided below. I would like to customize the chart by adding transparency and a linear-gradient effect. Can anyone provide guidance on how to achieve this? ...

csshighcharts

Updating the Wordpress menu: Get rid of the list items and instead add the class ".current-menu-item" directly to the anchor tag

Is there a way to customize the output of wp_nav_menu(); to display a navigation menu like this: <nav> <a>Menu Item</a> <a class="current-menu-item">Menu Item</a> <a>Menu Item</a> <a>Menu Ite ...

phphtmlwordpressfunction

Is there a way to display a vertical list in a horizontal orientation?

I am in the process of creating my portfolio on Cargo Collective and have customized one of their pre-made themes to suit my preferences. The only thing I'm currently struggling with is how to change a set of vertical links to display horizontally ins ...

htmlcsslistheaderalignment

limitation in bootstrap ensures that only one collapse element is open at any

Hey, can someone help me fix this code? I'm trying to make it so that only one element opens at a time, but I can't seem to figure out how. Right now, if I click on two elements, they both open and the other one doesn't close. This is what ...

javascripthtmlbootstrap-4

Manually adjusting the aria-expanded attribute to "true" does not result in opening a new tab

After a certain condition is met, I want to open another tab. Below is my bootstrap navbar code along with the jQuery script. <ul class="nav navbar-default nav-justified" role="tablist" id="navbar"> <li role="presentation" class="active"><a ...

javascriptjqueryhtmltwitter-bootstrap

Display the HTML code in its formatted text output

I am currently facing an issue while trying to take input from the user using the WYSIWYG text editor plugin. When I attempt to display the text in a label or paragraph, all the HTML tags become visible. For instance, @string str = "<b>sample text&l ...

html

Is it necessary to include the Roboto font when using MUI?

After reviewing the Material UI documentation, it appears that users are responsible for loading the Roboto font: Material UI is designed to use the Roboto font by default. You may add it to your project with npm or yarn via Fontsource, or with the Googl ...

cssreactjsmaterial-uifontsroboto

What is the solution for adjusting the positioning of the `<select>` element in Bootstrap?

Here is a snippet of HTML code: <button class="btn">hello</button> <select class="input-small"><option>1</option></select> <button class="btn">world</button> The position of the select element is not correc ...

csstwitter-bootstrapposition

Is there a way to update components in Angular without affecting the current URL?

I want to update a component without changing the URL. For example, I have a component called register. When I visit my website at www.myweb.com, I would like to register by clicking on sign up. How can I display the register component without altering the ...

htmlangulartypescriptangular-ui-router

Receiving an absence of string or a null value from a text box

My goal is to test the functionality of an <input> element by entering text into a textbox and then displaying that data in the console. However, I am encountering issues with retrieving and printing the content. Additionally, I am interested in test ...

javascripthtml

Can someone point out the mistakes in my CSS Layout?

I've been struggling to make progress on this task over the past couple of days, encountering roadblocks with no clear solution in sight. The maze of nested divs I'm navigating through might be playing tricks on my mind, so having a fresh pair of ...

htmlcss

transfer a product attribute value to a different product attribute within the Magento platform

There is an attribute called Weight : Attribute Code: weight Scope: general Catalog Input Type for Store Owner: Text Field Values Required: yes Apply To: Simple Product, Bundle Product Allow HTML Tags on Frontend: yes Also, there is a General Weight attr ...

javascriptphphtmlxmlmagento

Why Isn't AJAX Displaying the Output from PHP?

Currently, I am implementing ajax to display a string received from a php file. This particular php file is generating rows for an html table. My goal is to have ajax place these rows within a with a specific id that resides inside a and I want this oper ...

phpjqueryhtmlajax

What happens when a browser can support multiple versions of a font - which one does it choose

If I have two versions of a font, customFont1.woff2 and customFont1.woff, and I list the woff2 version first followed by the woff version in the font declaration file, what happens when the browser supports both formats? Will it download both fonts or ju ...

htmlcssfontsfont-face

the overflow issue with Summernote's dropdown menu

I am currently working on a 2 columns layout within 2 divs that have different margins set. In the left column, I have integrated a bootstrap datetimepicker and summernote. While the datetimepicker dialog overflows outside the internal div, I am wondering ...

csstwitter-bootstrap-3summernote

Pattern to filter out numeric values from a collection

I want to apply a regex pattern to the <input> form element. The pattern should specify a range of numbers that are not permitted as input. For example, let's say I have a list of numbers like {1,4,10}, and any number other than these should be a ...

htmlregex

What is the best way to combine 4 small triangle pieces in order to create one large triangle?

Is there a way to create an image background with triangle shapes by combining small triangles together? I am interested in making this collection of triangle image backgrounds. Can someone guide me on how to do it?! .block { width: 0; height: ...

javascriptjqueryhtmlcsssvg

Setting the width of colspan elements can be challenging when other columns have dynamic widths

I am working with a table setup that includes various columns for data tracking: <table > <thead style="width: calc(100% - 15px); display: table; table-layout: fixed;"> <tr> <th colspan="3">& ...

csshtml