Table width in Internet Explorer /Microsoft Outlook

Question

I'm working on a mailing and I'm having problems with setting a width in a table element in IE/ Outlook.

I have tried several things which I've seen in other questions but none of them seems to work.

The code is this, it includes some solutions I've tried. The div which wraps the table is used for other styling necessities.

<!doctype html>
<html lang=en>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                box-sizing: border-box;
            }
            table{
                border-collapse: collapse;
                border-spacing: 10px 5px;
            }
            </style>
    </head>

    <body>

        <div style="margin:0 auto; width:1000px;">

            <!--[if mso]>
                 <center>
                 <table><tr><td width="700">
            <![endif]-->

            <table cellpading="0" cellspacing="0" width=700 style="margin:0 auto; width: 700px">

                <!--A lot of <TR> -->

            </table>

            <!--[if mso]>
                </td></tr></table>
                </center>
            ![endif]-->  

            <div>
    </body>
</html>

score 0 · Answer 1 · answered Mar 20 '18 at 13:17

0

Here is a example of what we use:

<table style="background-color: #f7f7f7;" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
    <tr>
        <td valign="top" align="center">
            <table cellspacing="0" cellpadding="0" border="0" width="600">
                <tbody>
                        << DROP HERE YOUR TEMPLATE>>
                </tbody>
            </table>
        </td>
    </tr>
</tbody>

I hope this is the solution.

answered Mar 20 '18 at 13:17

Dedmen7

9
3

This is old school. The code from OP is hybrid method of coding and helps emails be responsive more and minimal CSS is needed. – Syfer Mar 20 '18 at 22:53

score 0 · Answer 2 · answered Mar 20 '18 at 22:52

Your code is almost good, you missed closing the endif for the second one. Try the below code and see how it goes.

<!doctype html>
<html lang=en>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                box-sizing: border-box;
            }
            table{
                border-collapse: collapse;
                border-spacing: 10px 5px;
            }
            </style>
    </head>

    <body>

        <div style="margin:0 auto; width:1000px;">

            <!--[if mso]>
                 <center>
                 <table><tr><td width="700">
            <![endif]-->

            <table cellpading="0" cellspacing="0" width=700 style="margin:0 auto; width: 700px">
<tr><td>
                <!--A lot of <TR> --> 
                Content here
</td></tr>
            </table>

            <!--[if mso]>
                </td></tr></table>
                </center>
            <![endif]-->  

            <div>
    </body>
</html>

Table width in Internet Explorer /Microsoft Outlook

2 Answers2