October 21, 2024
Chicago 12, Melborne City, USA
HTML

Issues with displaying the graph generated using table in outlook


I’m using the following code to generate a graph where the widths are calculated dynamically based on current and projected values, both of which are also dynamic. While the graph displays correctly in an online HTML compiler, it does not render properly in Outlook. Please help me resolve this issue.

<table style="background-color: #343a42; border-radius: 10px; padding: 15px;" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr style="width: 100%;">
            <td style="color: #ffffff; font-size: 12px; padding-left: 16px; padding-bottom: 4px; width: 70%;">Measurement in Gigabytes (GB)</td>
        </tr>
        <tr style="width: 100%; display: flex;">
            <td style="font-size: 12px; width: auto; writing-mode: vertical-rl; float: left; color: #fff; text-align: center;">AT&T</td>
            <td style="width: 100%;">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr style="display: flex; align-items: center;">
                            <td
                                style="
                                    color: #fbfcfd;
                                    font-size: 12px;
                                    padding-top: 10px;
                                    height: 65px;
                                    padding: 13px 0;
                                    border-radius: 0px 0 0 0px;
                                    z-index: 9;
                                    opacity: 0.75;
                                    background-color: #2b6a88;
                                    display: flex;
                                    justify-content: flex-end;
                                    align-items: center;
                                    padding-right: 8px;
                                    width: 68%;
                                    position: absolute;
                                "
                            >
                                8339.75
                            </td>
                            <td style="background-color: #90ee9080; width: 100%; padding: 10px; height: 50px; color: #fff; left: 0; top: 13px; align-items: center; display: flex; justify-content: flex-end; opacity: 0.75;">12227.25</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr style="margin-left: 16px; width: 100%; display: flex;">
            <td style="color: #fbfcfd; font-size: 12px; padding-top: 4px; width: 100%;">Current</td>
            <td style="color: #fbfcfd; font-size: 12px; text-align: end; padding-top: 4px; width: 100%;">Projected</td>
        </tr>
    </tbody>
</table>
        Measurement in Gigabytes (GB)
    
    
        A
        
            
                
                    
                        <td
                            style="
                                color: #fbfcfd;
                                font-size: 12px;
                                padding-top: 10px;
                                height: 65px;
                                padding: 13px 0;
                                border-radius: 0px 0 0 0px;
                                z-index: 9;
                                opacity: 0.75;
                                background-color: #2b6a88;
                                display: flex;
                                justify-content: flex-end;
                                align-items: center;
                                padding-right: 8px;
                                width: 68%;
                                position: absolute;
                            "
                        >
                            8339.75
                        
                        12221.25
                    
                
            
        
    
    
        Current
        Projected

the graph generated in the online html compiler is first image enter image description here and second image is generated in outlook enter image description hereenter image description here ,



You need to sign in to view this answers

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video