The Visualforce page is not displaying page breaks correctly for cells with rowspan in the table

Having encountered a similar issue to this question: table rowspan page break

On my Visualforce page, I have an HTML table with a custom rowspan in one column (varies based on the number of spanned rows) and I'm experiencing a styling problem (see issue highlighted in the green square here): enter image description here

For reference, see another image here: enter image description here

I have applied a style to the tr with a page-break-before: auto and a dynamic rowspan dictated by business logic.

Although I have attempted using page-break-inside on the spanned tr element, it has yielded no results.

htmlcsshtml-tablevisualforcepage-break

Answer №1

My problem was resolved by incorporating inner tables within the rows of the main table instead of utilizing the rowspan property in the 'tr' and avoiding the use of page breaks:

 <table class="general">
    <thead style="display: table-header-group; valign: top">
    .
    .
    .
    </thead>
    <tbody>
        <apex:repeat value="{!VALUE}" var="VAR">
        <tr>
            <td>
                <apex:outputText escape="false" value="{!VALUE}" />
            </td>
            <td>
            <table>
            <apex:repeat value="{!VALUE}" var="VAR">
            <tr>
                    <td>
                        <apex:outputText escape="false" value="{!value}" />
                    </td>
             </tr>
             </apex:repeat>
             </table>
        </tr>
    </tbody>

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

Defining the active element in the menu using JavaScript

I need help with my navigation menu: <ul> <li id="active"><a href="/">Home</a></li> <li><a href="/about/">About Us</a></li> <li><a href="/services/">Our Services</a>< ...

javascripthtmlcss

I am having issues displaying my background image

I'm experiencing an issue where my background image isn't displaying correctly. Here is the CSS code I'm using: body { background-image: url('img/bg.png'); background-repeat: no-repeat; } ...

css

What is the best way to split two divs in this manner?

Is there a way to split two divs like this in such a manner using TailwindCSS? Alternatively, what would be the CSS code for dividing these two divs? I am struggling with this concept and cannot wrap my head around how it can possibly be achieved. ...

htmlcssmaterial-uicss-selectorstailwind-css

How can I show hidden column names in the Sencha Touch 2 date picker component with CSS?

I am currently utilizing a date and time picker that has the ability to display ['month', 'day', 'year','hour','minute','ampm']. You can find the source code here. Although everything is function ...

javascriptcsstimesencha-touch-2datetimepicker

Is there a restriction on the number of stylesheets per page in Internet Explorer 8?

Discussing the limitations of CSS in a forum thread, a user shared insights: A user mentioned that Internet Explorer has is known to have a restriction of 4096 CSS rules per file. For more information, check out this source. Additionally, there might be ...

cssinternet-explorerinternet-explorer-8

Attempting to create a single function that can be utilized with numerous divs that share the same class in jQuery

Currently, I am working on creating a basic jquery gallery viewer. In my code, I have the following structure: <div class="photoset"> <img /> <img /> </div> <div class="photoset"> <img /> <img /> <i ...

javascriptjqueryhtmlcss

Switching the background color of alternating divs in reverse order: a step-by-step guide

I am looking to alternate the background color of divs between odd and even, with the last div being grey and the second to last div being green. I have tried using the odd/even classes in CSS, but it did not work as expected. .main{ width:500px; height ...

javascripthtmlcss

The navigation menu dissolves into hiding at the uppermost part of the page upon scrolling upwards on iOS devices

I am currently working on creating a navigation menu that will automatically hide when scrolling down and reappear when scrolling up. This functionality works perfectly fine on desktop and Android browsers, but I have encountered an issue specifically with ...

javascripthtmlioscsstwitter-bootstrap

I'm puzzled as to why my Contact Form is failing to send out emails

Looking to create an email send function in a pop-up on my website that can be accessed via the following link: The issue I'm facing is that while it redirects perfectly to the thank you message, the PHP implementation does not seem to work after the ...

phpjqueryhtmlcss

Designing Progress Bars with CSS3

I'm currently working on enhancing the appearance of the progress bars across my website, all of which are built using jQuery UI. My goal is to achieve a design similar to the one shown below (featuring a stylish bevel effect and a visually appealing ...

css

Proceed to the section with modal

My goal is to create a modal with 4 sections, each loading its content dynamically using the .load() function to the container on the right side. The challenge I'm facing is that I have a footer menu that triggers the modal to open, and I need it to ...

javascriptjqueryhtmlcssajax

The slider spills over the edges of the page

Seeking assistance – I managed to insert this logo slider onto my page. It seems to be functioning properly, but due to the width settings of the website engine, the modules are not fully stretching across the page. In an attempt to make the slider cove ...

jqueryhtmlcssslider

When a button is clicked in (Angular), it will trigger the highlighting of another button as a result of a value being modified in an array. Want to know the

Currently in the process of developing a website with Angular, I've encountered an unusual bug. The issue arises when using an *ngFor div to generate twelve buttons. <div *ngFor = "let color of colors; let i = index" style = "display ...

htmlangulartypescriptbuttonclick

Extracting specific text from HTML tags using Python's BeautifulSoup

I'm trying to extract specific tags from two different sections of text using the BeautifulSoup library in Python. Here's what I've attempted so far: g = soup.find_all("dtposted") for tag in g: print(tag) <dtposted>2020<trnamt& ...

pythonhtmlbeautifulsoup

Issues with the responsiveness of Bootstrap 4.5.0 grid system

While following a Django tutorial, I encountered an issue with Bootstrap cards and CSS styling. Using the latest version (Bootstrap 4.5.0), I noticed that my responsive grid was causing the cards to overlap as I increased the screen size. Comparing it to t ...

htmlcssdjangotwitter-bootstrapbootstrap-4

JavaScript is utilized to update HTML content through an Ajax request, but unfortunately, the styling is

Apologies for the unconventional title, I am currently in the process of creating a website. When the page is initially loaded, I call upon two scripts within the 'head' tag to create an attractive dynamic button effect. <script src="https:// ...

javascriptjqueryhtmlcssajax

JS not functioning properly in specific pages causing display issues with page height set to 100%

I am facing an unusual issue where certain pages do not stretch to 100% page height in the middle section, causing the left-hand border to be incomplete. For example, on the 'Brentwood' site (please click on the 'Login' link in the top ...

javascripthtmlcss

Using jQuery to add the input from a dynamically loaded Ajax select list to a different form prior to submission

Let's simplify the code for this question: I have two HTML forms with IDs of 'header' and 'existing' In the 'existing' form, there is a select element where the options list is loaded dynamically using Ajax based on sea ...

jqueryhtmlajaxformsselect

Tips for attaching an image to an email

Can anyone assist me with an HTML form that sends emails using PHP with image attachments? I have tried various codes, but none of them seem to work properly. The message gets sent with all the texts and even the image name, but the actual image is missing ...

phphtmlimageemailsend

Is there a way for me to adjust the image dimensions so that it doesn't surpass the width of its parent container?

When working with images, it can be tricky to set the original width while also ensuring it fits within a parent container. For example, if the parent container has a width of 1000px, you may want the image to have a max-width of 100%, but not exceed 1000p ...

javascriptcssimage