I am experiencing difficulty with implementing a page break within the <tr> and <tbody> elements

Below is the code I am working with:

{% for item in child.items %}
      
             {%set ns.count = ns.count + 1%}
           
       
   <tbody style="page-break-inside: avoid">
   <tr style="page-break-inside: avoid">
               <td style="border-bottom: 1px solid black; border-right: 1px solid black;border-left:1px solid black;">{{ns.count}}</td>
                <td colspan="3" style=" white-space: normal;  border-bottom: 1px solid black; border-right: 1px solid black;">{{item.sales_description}}</td>
                <td style=" border-bottom: 1px solid black; border-right: 1px solid black;">85177090</td>
                <td style=" border-bottom: 1px solid black; border-right: 1px solid black;">{{item.qty}}</td>
                <td style=" border-bottom: 1px solid black; border-right: 1px solid black;">PC</td>
                <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{item.rate}}</td>
                <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{item.qty * item.rate}}</td>
                <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">0</td>
                <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">0.00</td>
                <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{taxlist[0]}}</td>
                <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{(item.qty * item.rate * taxlist[0])/100}}</td>
                <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{taxlist[1]}}</td>
                <td style="border-bottom: 1px solid black; border-right: 1px solid black;text-align:right;">{{(item.qty * item.rate * taxlist[1])/100}}</td>
           </tr>
           </tbody>
           {% endfor %}

If a row breaks, it should be moved to the next page. However, I am facing issues with page breaks not working for <tr>, <tbody>. Can anyone provide assistance?

javascripthtmlcssbootstrap-4jinja2

Answer №1

To prevent page breaks within rows, utilize the following CSS:

td, th {
  page-break-inside: avoid;
}

The only accepted value for this property is "avoid". Do not use "forbidden", "never", or "false". While using this property can help avoid page breaks, it may not work in all cases as it depends on how the content is being paginated.

If you require further assistance, provide a runnable minimal reproducible example using codesandbox.io or a similar platform.

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

When a global variable is defined after a return statement within a function declaration, it does

Check out this Javascript code snippet: http://jsfiddle.net/ramchiranjeevi/63uML/ var foo = 1; function bar() { foo = 10; return; function foo() {} } bar(); console.log(foo); // should return 10, but returns 1 It's interesting to no ...

javascriptclosures

What steps can be taken to ensure the Instagram logo remains visible even when it is being hovered over?

Struggling to incorporate a social media icon on my website, I am facing an issue where the Instagram icon outline disappears on hover due to the gradient styling in CSS3. Below is my current code: .social-icons li.instagram a { border-radius: 50%; ...

cssinstagram

utilizing BrowserRouter for dynamic routing in react-router-dom

I'm currently facing a challenge with creating a multi-tenant SaaS solution. Each tenant needs to be able to use a subdomain, so that I can extract the subdomain from the URL and make a call to a REST API to retrieve data specific to that tenant. For ...

javascriptreactjsfrontendreact-router-v4react-router-dom

ERROR_UNSUPPORTED_ESM_URL_SCHEME - issue with next-sitemap plugin

I have a project utilizing next-sitemap with Node.js version v14.11.0. next-sitemap.config.js module.exports = { siteUrl: 'https://*****.com', generateRobotsTxt: true, robotsTxtOptions: { additionalSitemaps: [ 'htt ...

javascriptnext.jssitemap

Execute the knockout function using jQuery

There's a scenario where I am trying to trigger a knockout method using jQuery. The Knockout viewModel has already been bound, but I'm unsure of how to call it using jQuery. Below is the snippet of my code: $(document).ready() { form_submit( ...

javascriptjqueryajaxknockout.js

How can I integrate data pulled from another website onto my HTML webpage with Vue.js?

I have successfully extracted data from an API website and can display it in the console. However, I am facing issues with displaying the data on the webpage itself. Can someone assist me in this matter? Specifically, I am trying to display the id element ...

javascripthtmlvue.jsfetch-api

The correct way to write media queries in CSS for the iPhone

After successfully formatting a website for various devices using an online responsive design tester and CSS declarations like @media only screen and (max-width: 480px), I encountered an issue during testing on an actual iPhone. The browser was not computi ...

iphonecssmobilemedia-queriesdevice

Unusual behavior in ReactJS and HTML5 video player observed

I currently have two React presentation components that include HTML5 video tags. The first component, named Homepage, is as follows: export default class Homepage extends React.Component { render() { return( <div className="Homepage"> ...

htmlreactjsvideo

What causes these images to stack on top of one another rather than align in rows? [HTML][CSS][Bootstrap]

I've implemented Bootstrap's grid system to showcase two rows, each containing two images. Here is the code: <section class="container"> <div class="row"> <figure class="column-sm-6"> <p>floor pl ...

htmlcssbootstrap-4

HTML steps for smooth scrolling to the top and bottom of a list

My HTML contains a vertical list with top and bottom arrows positioned nearby. I am looking to implement a function where clicking on the top arrow will move the list up gradually, and clicking on the bottom arrow will move the list down step by step. Belo ...

javascriptjqueryhtmlcssangularjs

Textarea malfunctions if it includes HTML code

Here's a situation I'm facing. I'm setting up a basic text area with buttons for bold, link, img, and italics. When I enter plain text in the text area, everything works fine and the method is triggered as expected. But when I include HTML ...

c#htmlajaxrazorasp.net-mvc-5

Adjusting the transparency of one element and rotating another element that are the same size

This issue is driving me nuts: I'm attempting to rotate the border of a circle element and simultaneously adjust the opacity of the circle overlay when a user hovers over it. However, in my current setup, only the opacity changes: <div id="main-c ...

htmlcss

Send a complex Json object in a POST request

Hey guys, I'm new to the world of web development and I've encountered a challenging issue. I have a complex object with numerous fields filled by a JavaScript function that needs to be passed to a C# HttpPost Call. I attempted to use JSON.Strin ...

javascriptc#jsonajaxhttp-post

The dropdown div does not activate when the image is clicked

When the image in the simple dropdown is clicked, it fails to activate the dropdown feature. This issue was encountered while working on a Shopify project, making it challenging to troubleshoot. To demonstrate the problem, I have re-created the scenario i ...

javascripthtmlcssdrop-down-menuonclick

Control the data options available in the autosuggest textbox

I have implemented an autosuggest feature in a text box with predefined values. When typing the first letter in the textbox, a dropdown displays all related values. Is there a way to limit the number of displayed related values to 20? This is what my cu ...

phpjavascriptautosuggest

What is the best method to extract pixels from a computed texture in three js?

When it comes to computing a multidimensional array of data, I believe that GPUComputationRenderer is the ideal solution. I initially began from an example project and encountered a roadblock: var gpuCompute = new GPUComputationRenderer( 100, 100, this.r ...

javascriptthree.js

Utilize external URL in trigger.io's custom UIWebView component

I'm in the process of transitioning my existing backbone application, designed for a native iOS UIWebView, over to trigger.io in order to utilize its image caching and camera access features. The goal is to make this migration quickly and efficiently. ...

javascriptiostrigger.io

Tips for sending a reference to a JavaScript function

While constructing a table with DataTables and utilizing AJAX as its data source, I am encountering an issue with passing a function into the AJAX parameters. The $.post() function from regular JQuery seems to always send the value of my variable when the ...

javascriptjqueryajax

Issue with page break functionality during print preview

div.pagebreak { page-break-after: always; page-break-inside: avoid; } HTML <!-- Page separator --> <div class="pagebreak" style="float: none;"><hr class="hidden-print" /></div> <app-mud-chec ...

htmlcssangulartypescriptpage-break

The Jquery dialog unexpectedly covers the entire page instead of the intended div tag

Within my codebase, there exists a standard dialog box that is utilized consistently: <div id="dialog" style="display:none"> <img src="../images/ajax-loader.gif" align="middle" height="16px" width="16px" style="display:block;margin:auto;"/> &l ...

javascriptjqueryhtmldialog