在列顶部的表行

Question

我在表格行顶部的文字以某种方式受到它下方第二列的影响......似乎它占据了表格的整个宽度。

http://jsfiddle.net/PmWBw/2/

对不起，我知道我是唯一还在桌上工作的人。 HTML电子邮件仍然存在。

 <table width="800" class="bodyContent" style="border: 1px solid #b8b7b7;margin-bottom: 20px;">

            <table> 
                 <tr style="width: 800px;">TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT</tr>
            </table>


            <td valign="top" width="260" class="leftColumnContent">

                <table border="0" cellpadding="20" cellspacing="0" width="100%">
                    <tr mc:repeatable>
                        <td valign="top">
                            <img src="http://www.homeplan.com/newsletter/images/top_left.png" mc:label="image" mc:edit="tiwc300_image00" />
                        </td>
                    </tr>
                </table>
            </td>


            <td valign="top" width="260" class="rightColumnContent">

                <!-- // Begin Module: Top Image with Content \\ -->
                <table border="0" cellpadding="20" cellspacing="0" width="100%">
                    <tr mc:repeatable>

                        <td valign="top">

                            <img src="http://www.homeplan.com/newsletter/images/top_right.png" mc:label="image" mc:edit="tiwc300_image01" />

                        </td>
                    </tr>

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

Answer 1

对于初学者来说，你的第一行包含一个位于另一个内部的tr中的td。如果不出意外，那应该可以解决。

另外，有点与原始问题无关，但是当我没有看到添加的代码获得任何真正的好处或功能时，在你的单元格内部放置表似乎有点多余。您使用与td或图像本身相同的内容来设置内部表的样式。至少在这个特定的应用中 只是一个想法。

的更新：

<table width="600" class="bodyContent" style="border: 1px solid #b8b7b7;margin-bottom: 20px;">
    <tr>
        <td colspan="2">
            <table>
                <tr style="width: 600px;">
                    <td>TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT</td>
                </tr>
            </table>
        </td>
    </tr>

    <tr>
        <td valign="top" width="260" class="leftColumnContent">
            <table border="0" cellpadding="20" cellspacing="0" width="100%">
                <tr mc:repeatable>
                    <td valign="top">
                        <img src="http://www.homeplan.com/newsletter/images/top_left.png" mc:label="image" mc:edit="tiwc300_image00" />
                    </td>
                </tr>
            </table>
        </td>

        <td valign="top" width="260" class="rightColumnContent">
            <!-- // Begin Module: Top Image with Content \\ -->
            <table border="0" cellpadding="20" cellspacing="0" width="100%">
                <tr mc:repeatable>
                    <td valign="top">
                        <img src="http://www.homeplan.com/newsletter/images/top_right.png" mc:label="image" mc:edit="tiwc300_image01" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 2

首先，您不能将代码看起来像这样：<td><tr><td>asdf</td></tr></td>。 <tr>需要包裹<table>。