Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tables and rows not rendered correctly. #1005

Closed
bobozar opened this issue Dec 9, 2019 · 3 comments
Closed

Tables and rows not rendered correctly. #1005

bobozar opened this issue Dec 9, 2019 · 3 comments
Labels
bug Existing features not working as expected
Milestone
51

Comments

@bobozar
Copy link

bobozar commented Dec 9, 2019

I'm having issues with Weasyprint rendering the table header and rows correctly. I used an external service to test my html and it rendered perfectly fine. But Weasyprint didn't render the table header and rows correctly.

Below is how the table header looks.

image

 `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
        a {
            text-decoration: none !important;
        }
        
        #outlook a {
            padding: 0;
        }
        
        body {
            width: 100% !important;
            min-width: 100%;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            margin: 0;
            Margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        table {
            border-spacing: 0;
            border-collapse: collapse;
        }
        
        td {
            word-wrap: break-word;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
            hyphens: auto;
            border-collapse: collapse !important;
        }
        
        table.table-transactions tr:nth-child(odd) {
            background: #E8E8E8
        }
        
        table.table-transactions tr:first-child {
            background: transparent;
        }
    </style>
</head>

<body style="margin:0; padding:0; background-color:#F2F2F2;">
    <center>
        <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
            <tr>
                <td align="center" valign="top">
                    <table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:100%; width:100%;background: #26094F">
                        <tr>
                            <td align="left" valign="top" style="padding: 15px 25px;">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;font-size: 16px;text-align: left;">MA - 0493494034</p>
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;font-size: 16px;text-align: left;">From: 01-Jan-2019 - 24-Nov-2019</p>
                            </td>
                            <td align="right" valign="middle" style="padding: 15px 25px;">
                                <img src="http://example.com/assets/img/logo.png" style="max-width: 100%;height: 40px;">
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="center" valign="top">
                    <table cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:100%; width:100%;background: #fff">
                        <tr>
                            <td align="left" valign="top" style="padding: 30px;text-align: left;">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #000;font-size: 16px;text-align: left;">MAX INC<br> 0493494034
                                </p>
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #000;font-size: 14px;text-align: left;margin-top: 60px;">11, THEGDF GARDENS<br> Manchester, United Kingdom
                                </p>
                            </td>
                            <td align="right" valign="top" style="padding: 30px;text-align: right;">
                                <table cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:100%; width:100%;">
                                    <tr>
                                        <td align="left" valign="top" style="padding: 15px 0">
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#26094F;font-size: 16px;padding:5px;text-align: left;margin:0 0 1px">CurMAX</p>
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#26094F;font-size: 16px;text-align: left;padding:5px;margin:0 0 1px">Opening MAX</p>
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#26094F;font-size: 16px;text-align: left;padding:5px;margin:0 0 1px">Total MAX</p>
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#26094F;font-size: 16px;text-align: left;padding:5px;margin:0 0 1px">Total MAX</p>
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#26094F;font-size: 16px;text-align: left;padding:5px;margin:0 0 1px">Closing MAX</p>
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#26094F;font-size: 16px;text-align: left;padding:5px;margin:0 0 1px">MAX</p>
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#26094F;font-size: 16px;text-align: left;padding:5px;margin:0 0 1px">MAX</p>
                                        </td>
                                        <td align="right" valign="middle" style="padding: 15px 0">
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#5c467b;font-size: 16px;text-align: right;padding:5px;margin:0 0 1px">USD</p>
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#5c467b;font-size: 16px;text-align: right;padding:5px;margin:0 0 1px">5,000,000</p>
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#5c467b;font-size: 16px;text-align: right;padding:5px;margin:0 0 1px">500,000</p>
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#5c467b;font-size: 16px;text-align: right;padding:5px;margin:0 0 1px">25,000,000</p>
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#5c467b;font-size: 16px;text-align: right;padding:5px;margin:0 0 1px">15,000,000</p>
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#5c467b;font-size: 16px;text-align: right;padding:5px;margin:0 0 1px">80</p>
                                            <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;background:#5c467b;font-size: 16px;text-align: right;padding:5px;margin:0 0 1px">10</p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="center" valign="top">
                    <table class="table-transactions" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width: 100%; width:100%;background: #fff">
                        <tr>
                            <td align="left" valign="top">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;font-size: 16px;text-align: left;background:#26094F;padding: 5px 0 5px 20px;margin-bottom: 0;">TMAX Date</p>
                            </td>
                            <td align="left" valign="top">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;font-size: 16px;text-align: left;background:#26094F;padding: 5px 0 5px 20px;margin-bottom: 0;">TMAX Details</p>
                            </td>
                            <td align="left" valign="top">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;font-size: 16px;text-align: left;background:#26094F;padding: 5px 0 5px 20px;margin-bottom: 0;">Reference</p>
                            </td>
                            <td align="left" valign="top">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;font-size: 16px;text-align: left;background:#26094F;padding: 5px 0 5px 20px;margin-bottom: 0;">DeMAX</p>
                            </td>
                            <td align="left" valign="top">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;font-size: 16px;text-align: left;background:#26094F;padding: 5px 0 5px 20px;margin-bottom: 0;">WithMAX</p>
                            </td>
                            <td align="left" valign="top">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #fff;font-size: 16px;text-align: left;background:#26094F;padding: 5px 0 5px 20px;margin-bottom: 0;">BalMAX</p>
                            </td>
                        </tr>
                        <tr>
                            <td align="left" valign="top">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #555;font-size: 14px;text-align: left;padding: 5px 0 5px 20px;">01 Jan, 2019</p>
                            </td>
                            <td align="left" valign="top">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #555;font-size: 14px;text-align: left;padding: 5px 0 5px 20px;">TRF to HPMAX</p>
                            </td>
                            <td align="left" valign="top">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #555;font-size: 14px;text-align: left;padding: 5px 0 5px 20px;">0002928482492042</p>
                            </td>
                            <td align="left" valign="top">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #555;font-size: 14px;text-align: left;padding: 5px 0 5px 20px;">0.00</p>
                            </td>
                            <td align="left" valign="top">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #555;font-size: 14px;text-align: left;padding: 5px 0 5px 20px;">52,000</p>
                            </td>
                            <td align="left" valign="top">
                                <p style="font-family:Arial, Helvetica, sans-serif, sans-serif;font-weight:500;color: #555;font-size: 14px;text-align: left;padding: 5px 0 5px 20px;">USD5,000,000</p>
                            </td>
                        </tr>
                        
                    </table>
                </td>
            </tr>
            
        </table>
    </center>
</body>

</html>`

What am I missing?
@Tontyna
Copy link
Contributor

Tontyna commented Dec 9, 2019

Your table styling includes a lot of presentational hints, which are ignored by default. You can turn them on with the --presentational-hints parameter, see the documentation

@liZe
Copy link
Member

liZe commented Dec 15, 2019

There's something wrong, even with presentational hints. This sample draws a border when border is set to "0":

<table border="0">
  <tr><td>abc</td></tr>
</table>

@liZe liZe added this to the 51 milestone Dec 15, 2019
@liZe liZe closed this as completed in f0c4b43 Dec 15, 2019
@liZe
Copy link
Member

liZe commented Dec 15, 2019

Always cool to fix a bug that's already known and commented in the source 😉.

@liZe liZe added the bug Existing features not working as expected label Dec 17, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
51
Development

No branches or pull requests
3 participants
@liZe @bobozar @Tontyna