Float replacement for email in outlook

问题:

This is a follow up question to this question.

I am writing this two-column email and I have been advised to use float:left on my td's so that the widths are appropriate for the email. However, I don't think float is supported in outlook and my right column is being pushed outside the bounds of the entire table.

Here is a screenshot of how the email renders in outlook:

Code can be found here.

回答1:

Floating a td is a very strange thing to do. I haven't tried, but my guess is some versions of IE just won't do anything (therefore, for your concern, some versions of Outlook might show the same behaviour, or not, depending on the version and order of installation of MS Office and IE).

Floating any elements for email clients is a bad idea as well, since hotmail/outlook.com, and most versions of Outlook desktop do not support the float property.

See: http://www.campaignmonitor.com/css/

EDIT: It has nothing to do with floating or aligning. You have 6 rows in that table, and the second one, has 2 columns, all the rest have 1 column. You have to have the same amount of columns per table, so you can use the colspan attribute on all 5 of the other tr in order for the table to account for the tr that has 2 td, like this <tr colspan="2".... Then remove all floating, is unneccesary.

See http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan for further info.

回答2:

you can achieve a similar float effect using the align property, such as align="left" and nested tables.

<table cellpadding="0" cellspacing="0" border="1" width="600">
<tr>
    <td align="center" height="100" width="600">
        header
    </td>
</tr>
<tr>
    <td>
        <table align="left" cellpadding="0" cellspacing="0" border="1" height="50" width="298">
            <tr>
                <td>
                      column 1 
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="1" height="50" width="298">
            <tr>
                <td>
                      column 1 
                </td>
            </tr>
        </table>
    </td>
</tr>

 <tr>
    <td align="center" height="100" width="600">
        footer
    </td>
</tr>

here's a fiddle. i hope this helps.