CODEWITHSUNDEEP
htmlhtml-table
SaturnsEye
SaturnsEye

Reputation: 6499

How to stop table from adjusting width

I have a table set up for an email form but when I view it in Outlook the column gets pushed out and it doesn't align properly.

I want the text the sit in the column next to the image but It get's pushed over to the right when I view it in Outlook.

I've tried adding the width to the tables properties but it still plays up.

Obviously it views fine in JSFiddle but I'm hoping someone knows where the problem lies.

http://jsfiddle.net/KmqLg/

<table width="500px" border="1">
    <tr>
        <th height="40" colspan="2" align="left" bgcolor="#FFFFFF" scope="row">
            <h1><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-arrow-right-icon.png" width="16" height="30" />NAME</h1>
        </th>
    </tr>
    <tr>
        <th height="70" width="70" align="left" bgcolor="#FFFFFF" scope="row">
            <img src="http://www.nasa.gov/images/content/617883main_VIIRS_4Jan2012.small.jpg"
            width="70" height="70" />
        </th>
        <th width="430" height="41" align="left" bgcolor="#FFFFFF" scope="row"><strong>Text Text Text Text Text Text Text Text Text Text Text Text</strong>
        </th>
    </tr>
</table>

This is what Outlook is doing to my table:

enter image description here

As you can see, the text doesn't sit to the left of the cell.

Upvotes: 0

Views: 231

Answers (1)

Sbml
Sbml

Reputation: 1927

Try to remove px from width property in table and th tags like this

<table width="500" border="1">

For Outlook 2007 you could try to add inline css too

<th height="40" style="width:40px;" colspan="2" align="left" bgcolor="#FFFFFF" scope="row">

CSS SUPPORT

Try this:

<table width="500" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td height="40" width="498" bgcolor="#FFFFFF" scope="row">
             <h1><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-arrow-right-icon.png" width="16" height="30" />
        NAME</h1>

        </td>
    </tr>
    <tr>
        <td>
            <table border="0" width="498" cellspacing="0" cellpadding="0">
                <tr>
                    <td height="70" width="70" bgcolor="#FFFFFF" scope="row">
                        <img src="http://www.nasa.gov/images/content/617883main_VIIRS_4Jan2012.small.jpg" width="70" height="70" style="display: block;" />
                    </td>
                    <td width="428" height="70" bgcolor="#FFFFFF" scope="row"><strong>Text Text Text Text Text Text Text Text Text Text Text Text</strong>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Upvotes: 1

Related Questions