lenny lenny -4 years ago 78
HTML Question

Force table to be as wide as the content needs

I am using HTML-emails to send data tables to clients, but those tables can get pretty wide, at least 2000px. I want that table to take up as much room as it wants, but nothing more than it needs.

edit: I know emails shouldn't be that wide. The problem is that the tables have humongous width and they are supposed to be in the email body. If I leave width on auto, it just gets squished to however wide the container is. I need the tables to be wide enough to be readable, but not wider than necessary. I want the width to be automatically calculated, but not to be restricted by the container width.

Thanks for any answers :)

Answer Source

It's just some plain text, then that super wide table, and some more plain text. preferably I'd like the text to restrict itself to the width of the container, but I want the table to go as far as it needs to, to be humanly readable.

In that case, I'd try coding this with three email wrappers:

  1. A fixed width for the first block of text.
  2. An undefined width for the wide table (so it can stretch if need be).
  3. A fixed width for the second block of text.

Something like this:

<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;">
    <center style="width: 100%; background: #ffffff; text-align: left;">

        <!-- some plain text : BEGIN -->
        <div style="max-width: 680px; margin: auto;" class="email-container">
            <!--[if mso]>
            <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
            <tr>
            <td>
            <![endif]-->
                <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
                    <tr>
                        <td>
                            some plain text
                        </td>
                    </tr>
                </table>
            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
        <!-- some plain text : END -->

        <!-- that super wide table : BEGIN -->
        <div style="margin: auto;" class="email-container">
            <!--[if mso]>
            <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center">
            <tr>
            <td>
            <![endif]-->
                <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center">
                    <tr>
                        <td>
                            some plain text
                        </td>
                    </tr>
                </table>
            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
        <!-- that super wide table : END -->

        <!-- some more plain text : BEGIN -->
        <div style="max-width: 680px; margin: auto;" class="email-container">
            <!--[if mso]>
            <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
            <tr>
            <td>
            <![endif]-->
                <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
                    <tr>
                        <td>
                            some plain more text
                        </td>
                    </tr>
                </table>
            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
        <!-- some more plain text : END -->

    </center
</body>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download