XMLWorker: unable to align cell vertically properly

Upon reviewing this code snippet:

<table>
    <tr>
        <td border="1">
            <table>
                <tr><td>Blah</td></tr>
                <tr><td>Blah</td></tr>
                <tr><td>Blah</td></tr>
            </table>
        </td>
        <td border="1">
            <table>
                <tr><td>Blah</td></tr>
                <tr><td>Blah</td></tr>
            </table>
        </td>
    </tr>
</table>

In this context:

You will encounter the following:

However, upon clicking "transform" to generate the PDF with XMLWorker, the outcome is as follows:

This leads to a query: Is vertical alignment malfunctioning? How can one reposition the second table to align with the top of its parent cell?

cssitextxmlworker

Answer №1

Don't forget to specify the vertical alignment for the right cell.

I've customized your HTML code based on table4_css.html:

<table>
    <tr>
        <td>
            <table border="1">
                <tr><td>Blah</td></tr>
                <tr><td>Blah</td></tr>
                <tr><td>Blah</td></tr>
            </table>
        </td>
        <td valign="top">
            <table border="1">
                <tr><td>Blah</td></tr>
                <tr><td>Blah</td></tr>
            </table>
        </td>
    </tr>
</table>

You can access the source code for converting this HTML to PDF here. Check out the resulting PDF: html_table_7.pdf

By utilizing the valign attribute, you'll notice that the appropriate adjustment has been made to the right portion.

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

Parallax Effect Slows Down When Scrolling In Web Page

Currently in the process of creating a website with a scrolling parallax effect using Stellar.js on the header and three other sections. However, I'm experiencing lag when scrolling, especially at the top of the page. I've attempted to reduce la ...

javascriptjqueryhtmlcssparallax

Issues arise in mobile Safari when attempting to load JavaScript files, resulting in

Encountering an issue with my Angular app on mobile Safari during the initial load, where it hangs on a blank page for nearly 2 minutes. Interestingly, the app functions perfectly on other browsers, including Mac Safari and iPad Safari. Initially, I suspe ...

javascriptjquerycssangularjssafari

I am struggling to get the images aligned properly on my HTML page. Can someone please advise on how to fix this issue?

On my HTML page, I have 2 div fields. Within each field, there are 5 images listed sideways. The issue is that the images in the div below are not lining up properly side by side. Given my limited frontend knowledge, how can I align them correctly? Here&a ...

htmlcss

"Implementing a responsive design with a background image and radial gradient - how to

The image currently in use: https://i.stack.imgur.com/piK6l.jpg Here is how I've implemented it using Vue.js, Bootstrap, and CSS: Code Snippet <div class="landing"> <div class="container text-white details h-100"> ...

htmlcssvue.jsbootstrap-4radial-gradients

What causes offsetHeight to be less than clientHeight?

INFORMATION: clientHeight: Retrieves the height of an element, taking into account padding offsetHeight: Obtains the height of an element, considering padding, border, and scrollbar Analyzing the Data: The value returned by offsetHeight is expected to ...

javascripthtmlcss

Unable to implement CSS styling on Bootstrap collapsible menu

When you visit this website and resize the browser window to reveal the toggle buttons, clicking on either one will only expand the dropdowns to a small portion of the screen width. I would like both dropdowns to stretch out and fill 100% of the available ...

jqueryhtmlcsstwitter-bootstrap-3

What methods are available to load sections of a complex SVG shape asynchronously?

I'm currently in the process of creating a website with a geographic map built using SVG, pulling data from OpenStreetMap. Due to its large size and potential for transformations such as zooming and moving, only a portion of it will be visible on the ...

javascripthtmlcsssvgcatiledlayer

Are Your Padding Styles Missing?

I've noticed that the text under the photos on this page in the main section (a.event) is not displaying the 5px padding top and bottom. Any suggestions for fixing this? Thank you! =) a.event { width:315px; height:auto; border:0; padding: 5px 0; } ...

csswordpresspadding

Adjusting the transparency of TabBadge in Ionic 2

I am currently working on a project that involves tabs, and I'm looking to update the style of the badge when the value is 0. Unfortunately, I am unsure how to dynamically change the style of my tabs or adjust the opacity of the badge in the style. M ...

cssangulartypescriptsassionic2

The align-middle Bootstrap class does not seem to be working within the specified div

I want to vertically align text (<span class="align-middle">middle</span>) in the center of a div. Here is the code snippet: <div class="col-4 shadow product-added"> <div class="row"> <div cla ...

htmlcsstwitter-bootstrap

The JavaScript code will automatically execute loops

Let me illustrate my point with two functions. Function 1 This function triggers a transition when you hover over the square. If you move your mouse off the element and then back on while the transition is still in progress, it will wait until the end of ...

javascriptjqueryhtmlcssjquery-ui

Utilizing Material UI with Appbar logo aligned to the left and Tabs featured at the center

I am currently working on creating a react material ui AppBar. The design includes a logo and tabs, with the tabs supposed to be centered in the AppBar and the logo positioned on the left side. However, I have been facing difficulty in making the logo al ...

cssreactjsmaterial-uicss-grid

Setting the path to an image component using the style jsx tag in Next.js: A step-by-step guide

While utilizing jsx to define styles for my NextJs components, I am facing the challenge of defining a background image for certain elements. I have realized that only relative paths or absolute paths are accepted. But how can I pass a relative path to th ...

cssreactjsjsxnext.js

<use> - SVG: Circles with different stroke properties

Why is the stroke of both <use> elements being ignored here? The stroke color of <circle> is set to blue, which is also appearing on both <use> elements. Why? I am trying to set different stroke colors for all three of these elements, bu ...

javascripthtmlcsssvg

Adding a class to a different UL tab from the tab div in jQuery tabs - a guide

Looking to implement a tabs navigation using jQuery without the jQuery Tabs UI. Essentially, when a user clicks on a list item, the script selects the list element with data-tab="X" and adds the class current, making the link visible (default op ...

javascripthtmljquerycsstabs

Generating divs dynamically with inline styling and utilizing ngFor, while incorporating a conditional check with ngIf in Angular

Currently, I have an Angular component where I am dynamically generating div elements using the ngFor directive. However, I also need to validate a condition before creating each div, and I'm facing challenges when trying to use both ngFor and ngIf in ...

htmlcssangular

The grid elements are not in perfect alignment

I'm having trouble aligning the <p> element to the left and the image to the right. The image is not aligning properly with the fourth column, so I need to figure out how to fix that. .content{ display: grid; grid-template-columns: 25% 25 ...

htmlcsscss-grid

CSS Animation: Smoothly transition out of a class

When this code is executed, the modal is displayed with a smooth transition using CSS3. Upon clicking on "Close Modal," the class ".is-active" is removed instantly. Instead, I would like to achieve the reverse effect where the class is removed gradually. ...

jquerycssanimation

Utilize CSS scrolling to present all items in a single line

Looking to showcase images in a horizontal line with scroll functionality? Unsure of how to achieve this and would really appreciate some guidance. CSS .img { max-width: 400px; position: relative; } .animal { float: left; background-color: #fff; ...

css

Horizontal Screen Sharing on iPad

Currently, I have a two-column website set up using Wordpress. However, I am facing an issue with the right side column scrolling over on iPads. While the page behaves properly on desktops, on iOS devices, the div is able to scroll over the navigation ba ...

ioscsswordpresswebkit