What is the best way to insert a page break only when necessary?

My code includes multiple dynamic tables within a div element:

<div>
    <table>
        <tr></tr>
        <tr></tr>
        ...
    </table>  
    <table>
        <tr></tr>
        <tr></tr>
    </table>
 ...more tables
</div>

However, when I attempt to print the div using javascript or jQuery, some tables get cut off in the middle.

I have tried using CSS properties such as page-break-after / page-break-before, but that results in each table being placed on a separate page.

Every user's table height varies, making it impossible to determine the exact height beforehand. Is there a solution to prevent splitting and only break pages when necessary?

javascriptjqueryhtmlcsshtml-table

Answer №1

To prevent breaks inside a table or row, you can include the following CSS code:

Requirement : Ensure no breaks occur in the table or row

<style type="text/css">
table tr, table th {
    page-break-inside: avoid;
}    
table {
    page-break-after: auto;
}
</style>

For further information, refer to the link here

Answer №2

Check out these guidelines:

table { 
  display:block; 
  page-break-inside:auto;
}
tr { 
  page-break-inside:avoid; 
  page-break-after:auto; 
}

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

Guide to utilizing the bootstrap flex method for ensuring the inner box occupies the entire height of its parent container

Is there a more flexible solution than setting the parent element to relative and the child to absolute? Kindly refrain from marking this question as a duplicate of Make flexbox children 100% height of their parent I tried the method suggested by @David ...

htmlcssflexboxbootstrap-4

Necessary input in Html.TextBoxFor

Is there a way to format the value of a TextBox using the following structure: <td>@Html.TextBoxFor(m =>(m.Code), new { @required = "required"})</td> Initially, this format works as intended. However, when a default value is set for the T ...

c#asp.netcssasp.net-mvc-4html-helper

What is the importance of utilizing state changes for React developers when working with CSS Pseudo classes?

Could someone please clarify why, in React, state changes are necessary for CSS Pseudo classes such as hover, focus, active, etc? Why didn't the developers of React keep it simple like we do in regular CSS? ...

javascriptreactjs

The challenges of positioning HTML li elements in a floating layout

Check out my website: . I'm having an issue with the layout where two <li> elements are stacked on top of each other and one is floating next to them, but it's only floating next to the second one. How can I make it float next to the first ...

htmlcss

What is the reason for the malfunctioning of the AJAX POST request?

<script> function postUserComment() { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 ...

javascriptphpajax

Are there any web browsers that automatically switch to a non-SSL connection if an attempt to connect with SSL

I regularly utilize jQuery along with jQuery.ajax to make connections between pages. I am interested in establishing a connection from a non-SSL page to an SSL page using ajax. Are there any web browsers that will attempt to connect via non-SSL if the con ...

javascriptjqueryajaxssl

The Express.js main router is functioning properly, however, the other routers connected to it are experiencing

I'm encountering an issue with my routers. The main route /weather is working fine, but other routes connected to it are not functioning properly. app.js const express = require('express'); const weatherRoute = require('./back/routes/w ...

javascriptnode.jsexpressrouterroot

Why isn't my Vue2 data updating in the HTML?

Starting my journey with Vue, I have been finding my way through the documentation and seeking support from the Vue community on Stack Overflow. Slowly but steadily, I am gaining a better understanding of how to create more complex components. The issue I ...

javascriptvue.jsvuejs2vue-component

Unresolved promise rejection in a React application

I attempted to run npm start and encountered the following error message: “(node:4786) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error occurred due to either throwing an error inside an async function without a catch block, or r ...

javascriptnode.jsreactjspromise

How can I create a regex pattern that will exclude characters within parentheses?

While working on some regex, I encountered a bug: The scenario is as follows: I have this string - for example "+1/(1/10)+(1/30)+1/50" and I applied the regex /\+.[^\+]*/g to it, which worked perfectly giving me ['+1/(1/10)&apos ...

javascriptregexregex-lookaroundsregex-negation

"Utilize PHP to link to the same page, pass data through $_POST method, and

I have a database table containing (NumSection (id) and NomSection) In my webpage, I want to display all the data from 'NomSection' as a link. When clicked, I want to open the current page with $_POST['nomSection'] and show the data fo ...

phphtml

Ordering Arrays with Angular's Custom Pipe in a Custom Way

I created a custom sorting function in my Angular application that arranges an array of objects based on a numerical property. Here is an example where the custom pipe is utilized: <div *ngFor="let product of products | orderBy:'price'"> ...

javascriptangulartypescriptasynchronous

Unlocking the secrets of integrating Vuex store with JavaScript/TypeScript modules: A comprehensive guide

I am working on a vue application and I have a query. How can I access the store from javascript/typescript modules files using import/export? For example, if I create an auth-module that exports state, actions, mutations: export const auth = { namesp ...

javascripttypescriptvue.jsvue-componentvuex

Tips for utilizing CSS container queries in conjunction with the Material-UI framework

I'm looking to implement CSS container queries with MUI. In my code, I want to change the background color to red if the parent width is less than 300px. Check out the sandbox const StyledItem = styled("div")(({ theme }) => ({ border: ...

javascriptcssreactjsmaterial-uicontainer-queries

HTML5 video starting soon - countdown timer initialized

I'm currently working on incorporating a 3-second timer to display before the HTML5 video starts playing. Right now, I have a hover function in place that successfully starts the video upon hovering over it. However, I'd like to add a timer featu ...

jqueryhtml

Activate dual trigger for jquery modal feature

My code always doubles the previous function. var deleteModal = $('.bs-delete-modal-sm'); deleteModal.on('shown.bs.modal', function(event) { var button = $(event.relatedTarget); // Button that triggered the modal var recipientId ...

jquerybootstrap-modal

The ajax code is failing to retrieve the data from the table and populate it in the

hi guys i have an issue on ajax. where ajax can't work to take the data of second rows. This's code in model function getdtbarang($barcode = FALSE) { if ($barcode === FALSE) { $query = $this->db1->get(&a ...

javascriptphpajax

What is the best way to delay the display of a jQuery dialog until the content has been successfully

I've set a button's onclick function to trigger the EditContact function, which opens a jQuery dialog, retrieves data from the server, and displays it. Everything is working fine, but I'm looking to enhance its functionality. Currently, the ...

javascriptjquery

Checking for the presence of a specific function in a file using unit testing

I am curious if there is a possible way to utilize mocha and chai in order to test for the presence of a specific piece of code, such as a function like this: myfunction(arg1) { ...... } If the code has been implemented, then the test should return t ...

javascriptnode.jsunit-testingmocha.jschai

Implementing multiple jQuery Ajax requests in ASP.NET MVC: Efficiently handling concurrent requests

My web page has a tabbed style layout where each tab triggers an Ajax request for their content using jQuery. The backend is ASP.NET MVC running on Visual Studio with the 'ASP.NET Development Server' handling requests. I am encountering the follo ...

.netjqueryasp.net-mvcajax