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.

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

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
Milestone

Comments

@bobozar
Copy link

@bobozar 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

This comment has been minimized.

Copy link
Contributor

@Tontyna 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 liZe added the conformance label Dec 15, 2019
@liZe

This comment has been minimized.

Copy link
Member

@liZe 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 in f0c4b43 Dec 15, 2019
@liZe

This comment has been minimized.

Copy link
Member

@liZe 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 label Dec 17, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants
You can’t perform that action at this time.