Creating a New Section in your HTML Table

Can a page break be implemented in an HTML table? I've attempted to add page breaks to the following HTML:

<html>
    <title>testfile</title>
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="pragma" content="no-cache" />
    <style type="text/css">
        PB {
            page-break-inside: avoid;
        }
    </style>
    </head>
    
    <body>
        <table width="100%">
            <tr>
                <td width="30%"><i>Group:</i>
                </td>
                <td width="70%">Test Group 1</td>
            </tr>
            <tr>
                <td><i>Title:</i>
                </td>
                <td><b>Test Title 1</b>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
        </table>
        <br/>
        <table width="100%">
            <PB>
                <tr>
                    <td width="30%"><i>Group:</i>
                    </td>
                    <td width="70%">Test Group 2</td>
                </tr>
                <tr>
                    <td><i>Title:</i>
                    </td>
                    <td><b>Test Title 2</b>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </PB>
        </table>
        <br/>
        <table width="100%">
            <PB>
                <tr>
                    <td width="30%"><i>Group:</i>
                    </td>
                    <td width="70%">Test Group 3</td>
                </tr>
                <tr>
                    <td><i>Title:</i>
                    </td>
                    <td><b>Test Title 3</b>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </PB>
    </body>
</html>

The page breaks function correctly in FireFox, but are causing issues in IE10.

I've heard that IE doesn't handle page breaks well in tables. If this is true, does anyone know of a workaround or alternative solution that could be used instead?

Thank you!

Answer №1

It appears that your code structure is incorrect, specifically in how you are calling CSS with the <PB>. For it to work properly, you should reformat it as shown below:

    <table width="100%" class="PB">
        <tr>
            <td width="30%"><i>Group:</i>
            </td>
            <td width="70%">Test Group 2</td>
        </tr>
        <tr>
            <td><i>Title:</i>
            </td>
            <td><b>Test Title 2</b>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
    </table>

The issue lies in the fact that the page-break class is primarily designed for text elements such as H1-H6, P, and blockquotes, rather than block elements like tables. Therefore, there may be compatibility problems across different browsers when implementing this method. It is advisable to thoroughly test its functionality on various browsers to ensure consistent behavior.

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

Adjust the appearance of an element based on user selection from a dropdown menu under certain circumstances

I am working on creating a dropdown menu using a JavaScript array. My goal is to display a specific span element when certain options are selected. For instance, I want the span to be shown only when options "a" and "c" are selected, but not when option " ...

Is it possible for a CSS code to be universally effective across all PHP files by setting style.css in header.php and then including header.php in each of the other PHP files?

Let me confirm, the code snippet from the header.php file is as follows: <link rel="stylesheet" href="style.css"> If I include the following code in every other php file: include 'header.php'; Will all the files have access to style.css ...

Ways to delete an attribute from a DOM element with Javascript

My goal is to use JavaScript to remove an attribute from a DOM node: <div id="foo">Hi there</div> First, I add an attribute: document.getElementById("foo").attributes['contoso'] = "Hello, world!"; Then I attempt to remove it: doc ...

Shifted picture next to the accompanying words

I have successfully created a slideshow of images using JavaScript. <html> <head> <script language="JavaScript"> var i = 0; var path = new Array(); path[0] = "one.jpg"; path[1] = "two.jpg"; function swapImage() { document.slide ...

The div is empty when trying to display Google Maps

When I set the height of my Google map div in pixels, it displays correctly. However, when I try to set it as a percentage, specifically 100%, the map does not show up. I have tried setting the height of all parent divs as well, based on suggestions from S ...

Chrome's Tab key causing unremovable black border [2022]

Is there a way to change the color of the black box shadow to a different hue when switching between nav tabs using the Tab key? Here is the code snippet: <ul class="nav nav-tabs m-5"> <li class="nav-item"> <a clas ...

Can you see the visible area tag?

Is there a way to make an HTML element visible at all times, not just on focus? It seems like it should be as easy as this: HTML: <img src="image.png" width="100" height="100" usemap="#Map" /> <map name="Map" id="Map"> <area shape="circl ...

Step-by-step guide on implementing a border-bottom for an active link

Is there a way to apply a border-bottom to btn_articles and btn_posts when one of them is clicked? I attempted to use the active class but it did not have the desired effect. Any suggestions or solutions would be greatly appreciated. let btn_articles = ...

What is the process for utilizing html4 or previous versions in eclipse mars?

I recently started using Eclipse and my version of the software automatically supports html5. However, when I try to use outdated tags that are not compatible with html5, I encounter errors. Can someone please provide guidance on how I can switch to usin ...

Achieving Inline Icons with Text in Bootstrap 5 Button

Looking for some assistance <div class="col-auto mt-lg-0 mt-2"> <a href="#" style="--bs-btn-font-size: .95rem;" class="btn btn-outline-secondary"> <i class="bi bi-download"></i&g ...

Is there a way for me to retrieve the value from an input, round it up to the nearest even number, and assign it to a new variable?

I am working on a project that involves two text boxes and a drop-down menu for providing rates. The values in the text boxes are given as inches. I want these inputs to be taken as values, rounded up to the next even number, and then set as variables. How ...

Resolving a CSS Layout Dilemma: How to Overlay Sidebar on Wrappers

I've run into a challenge while attempting to position a sidebar over page wrappers. The issue with absolute positioning arises when the sidebar needs to align with the corner of the blue header. I have contemplated using JavaScript to maintain its cu ...

Issue with JQuery Event Listener on Canvas Subelement not functioning

I encountered an issue while trying to implement a custom crop rectangle on a canvas using JavaScript. I created a function that, when called, should add a child node to the existing canvas and use JQuery listeners to draw the rectangle. However, although ...

Disable and grey out the button while waiting for the Observable to broadcast successfully

component.html <button mat-raised-button color="primary" type="submit"> <mat-icon>account_box</mat-icon> <span *ngIf="!loading">&nbsp;&nbsp;&nbsp;Register</span> <span * ...

Is there a way to resolve issues with window.open() on Heroku platform?

I've been working on hosting a webpage on Heroku using Node.js. Instead of using the php method, I opted to go with Node and it's been going smoothly so far. However, I've run into a small issue. Here's what my Procfile looks like: web ...

Please assist in changing the text color of the right side of my navigation bar to white with the help of Bootstrap

Is there a way to change the text color of my nav-bar to white, while keeping the background as 'primary-subtle' with Bootstrap? How can I override Bootstrap's default functions using CSS when combining these two styles? Here is the code sn ...

outdoor checkboxes indicate completion

Whenever I click on the email address example [email protected], my first checkbox gets checked inexplicably... I have created a fiddle to demonstrate this issue... http://jsfiddle.net/pZ8jY/ <table class="checkboxes"> <tr> <td ...

Adjust background image size to fit the screen, not just the content

Whenever I set the background image for each page using the following JavaScript code, var imageUrl = 'url(' + imageUrl + ') top left no-repeat fixed'; $('body').css({ 'background': imageUrl }); I also add ...

What is the most effective method for incorporating CSS using Javascript to target a specific aria-label attribute?

Is there a way to add a CSS property to a specific tag with a particular aria-label on document load? My goal is to change the flex order of a section to 2. I need help using JavaScript to target the aria-label 'block 1' so I can set the order t ...

Interactive CSS Video Gallery Slideshow

Is there a way to create a slideshow video gallery using CSS? I've looked everywhere but all I find are slideshow image galleries. If anyone has any resources or tips on how to do this, please share! This is the kind of video gallery I'm looking ...