如何阻止表调整宽度

时间:2013-08-29 07:55:37

标签: html html-table

我为电子邮件表单设置了一个表格但是当我在Outlook中查看时,该列被推出并且未正确对齐。

我希望文本位于图像旁边的列中,但是当我在Outlook中查看时,它会被推到右侧。

我已经尝试将宽度添加到表格属性中,但它仍然会播放。

显然它在JSFiddle中看得很好,但我希望有人知道问题出在哪里。

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>

这就是Outlook对我的表所做的事情:

enter image description here

如您所见,文本不会位于单元格的左侧。

1 个答案:

答案 0 :(得分:1)

尝试从table中的width属性中删除px,并像这样删除

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

对于Outlook 2007,您可以尝试添加内联css

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

CSS SUPPORT

试试这个:

<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>