如何删除HTML表中的白色水平线

时间:2013-06-06 02:19:36

标签: outlook html-table whitespace html-email horizontal-line

我想我已经搜索了互联网的每个角落,试图解决这个问题。我已经全面找到了类似的问题,但没有一个解决方案对我有用(或者,或者我必须遗漏一些东西)。

我正在创建一个包含表格布局的电子邮件广告系列。在FF,Chrome和IE中它看起来都很棒,但是当我在Outlook 2010中测试它时,它在页面主表格中的2个TR之间给出了一条水平白线。

请遵守以下2 TR:
注意:我已编辑此问题以包含整个代码:

<body>
<table width="100%">
    <tr>
        <td>
            <table width="700" style="background-color: #ecebeb; border: solid maroon 2px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" align="center" >
                <tbody>
                    <tr >
                        <td>
                            <table width="100%"  style="background-color: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 16px; color: #000000">
                                <tr>
                                    <td width="70%" cellpadding="10px" height="85">
                                        <img src="http://www.codegroup.com.au/images/Introduction%20Newsletter/CodeGroup_Logo_small.png">
                                    </td>
                                    <td width="30%" style="text-align: right" height="85">
                                        Building Certifiers<br>
                                        Building Surveyors<br>
                                        Access Auditors<br>
                                    </td>
                                </tr>   
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style=" padding-left: 10; padding-right: 10; padding-top: 10; font-family: arial,helvetica,sans-serif; font-size: 14px; color: #000000">
                            <strong>
                            If you're designing or building, you need a Building Certifier<br>
                            CODE Group are specialist commercial Building Certifiers, Surveyors and Access Auditors.
                            </strong>
                            <hr>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left: 10; padding-right: 10; font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000">
                            We offer a comprehensive range of professional services which integrate the concept, design, approval 
                            and project completion for the property and construction industry.<br><br>
                            We understand the practical demands of the construction industry and make every effort to assist our client 
                            in finding solutions to compliance problems.<br><br>
                            Each project is approached with integrity and professional confidence to deliver the best possible solutions and 
                            premium service to our clients.<br><br>
                            We understand the urgency of your project and that it can’t move forward unless we do our part so we contact 
                            you at times during our assessment to let you know how it is progressing. <br><br>
                            <i><center>"Our mission is to manage risk for our clients in design and construction to ensure they meet
                            statutory<br>obligations whilst achieving project objectives and outcomes" </i></center>
                            <hr>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table width="100%"style="font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000">
                                <tr>
                                    <td width="50%" align="left" style="text-align: left; padding-left: 25;" valign="top" >
                                        <b>BUILDING CERTIFIERS</b><br><br>
                                        Design Certification: <br>
                                        Certificate of Design Compliance<br><br>
                                        Construction Certification: <br>
                                        Certificate of Construction Compliance<br><br>
                                        Permit Coordination: <br>
                                        Building Permit & Occupancy Permit<br>
                                    </td>
                                    <td width="50%" align="right" style="text-align: right; padding-right: 25" valign="top" >
                                        <b>BUILDING CONSULTANTS</b><br><br>
                                        Preliminary Review & Report of Schematic Plans<br>
                                        Access Audits, Appraisals & Consulting<br>
                                        Due Diligence Inspections & Reports<br>
                                        Building Audits for Benchmark Compliance<br>
                                        Expert Building Code Advice<br>
                                        Fire Engineering Advice<br>
                                    </td>
                                </tr>
                            </table>
                            <br>
                            <table width="100%" style="font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000">
                                <tr>
                                    <td width="38%" valign="bottom" style="padding-left: 25;">
                                        <b>OUR SPECIALTIES</b><br><br>
                                        Multi Residential Towers<br>
                                        Hotel & Serviced Apartments<br>
                                        Education Buildings<br>
                                        Mixed Use Buildings <br>
                                    </td>
                                    <td width="38%" valign="bottom">
                                        Hospitals & Healthcare Buildings<br>
                                        Aged Care Developments<br>
                                        Shopping Centres<br>
                                        Office Buildings<br>
                                    </td>
                                    <td width="28%" valign="bottom">
                                        Office & Retail Fitouts<br>
                                        Industrial Buildings<br>
                                        Sports Stadiums<br>
                                        Mining Projects<br>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left: 10; padding-right: 10; font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000" >
                            <br>
                            <b>Who we are</b><br><hr>
                            <p>CODE Group is made up of an established team of experienced members who have over 80 years building 
                            industry experience in Perth, the north-west of WA and interstate. CODE Group's teamwork is our strength.<br><br></p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table width="100%" >
                                <tr>
                                    <td width="53%">
                                    <img src="http://www.codegroup.com.au/images/Introduction%20Newsletter/Team-Photo_no-corners.png" align="right">                        
                                    </td>
                                    <td width="47%" style="padding-left: 10; padding-right: 10">
                                        <table style="font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000">
                                            <tr><td>Gary Cox</td><td>Managing Director</td></tr>
                                            <tr><td>Wayne Chant</td><td>Co-ordinating Building Surveyor</td></tr>
                                            <tr><td>Paul da Costa</td><td>Senior Building Surveyor</td></tr>
                                            <tr><td>Tanya Scarce</td><td>Building Surveyor</td></tr>
                                            <tr><td>Kelly Hudson</td><td>Building Surveyor</td></tr>
                                            <tr><td>Alison Shiels</td><td>Access Auditor</td></tr>                          
                                            <tr><td>Antonia Yakubova&nbsp;&nbsp;</td><td>Office Manager</td></tr>                               
                                            <tr><td>Linda Marr</td><td>Accounts Manager</td></tr>                               
                                        </table>
                                    </td>
                                </tr>
                            </table>                            
                        </td>
                    </tr>
                    <tr>
                        <td align="right" style="padding-right: 10; padding-left: 10; font-family: arial,helvetica,sans-serif; font-size: 14px; color: #000000">    
                            <b>Our Projects</b><hr>
                        </td>
                    </tr>
                    <tr>
                        <td align="middle" cellspacing="0" cellpadding="0">
                            <table>
                                <tr>
                                    <td width="33%" style="padding-left: 20; font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000" valign="top">
                                        20 Storey Mixed Use Hotel<br>
                                        Murray Street, Perth<br><br>

                                        3 Storey Mixed Use Apartments<br>
                                        215 Hay Street, Subiaco<br><br>

                                        Point Fraser Entertainment Centre<br>
                                        4500sqm, East Perth Foreshore <br><br>

                                        Observations City Refurbishment<br>
                                        Scarborough Beach
                                    </td>
                                    <td width="33%" valign="top" style="padding-left: 20; font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000">
                                        Heritage Conversion<br>
                                        307 Murray Street, Perth<br><br>

                                        Bidvest Distribution Centre<br>
                                        107,000 cu/m Warehouse<br><br>

                                        Joondalup Square<br>
                                        13,000sqm Retail Showrooms
                                    </td>
                                    <td width="33%" valign="top" style="padding-right: 20; font-family: arial,helvetica,sans-serif; font-size: 13px; color: #000000">
                                        6 Storey Mixed Use Building<br>
                                        Wexford Street, Subiaco<br><br> 

                                        Fitout of Council House<br>
                                        Level 1 & Basement, Perth<br><br>

                                        Veil Offices, 4 Storey offices<br>
                                        Over existing 2 Storey Carpark<br>
                                        253 St. Georges Terrace, Perth<br>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td width="100%" align="middle" valign="top" cellspacing="0" cellpadding="0">
                            <img style="display:block;" src="http://www.codegroup.com.au/images/Introduction%20Newsletter/Introduction2_image_stack2.png">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table width="100%" style="background-color: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 14px; color: #000000">
                                <tr>
                                    <td width="50%" valign="bottom" style="padding-left: 10" height="80">
                                        CODE Group<br>
                                        7 First Avenue<br>
                                        Applecross WA 6153
                                    </td>
                                    <td width="50%" valign="bottom" align="right" style="padding-right: 10" height="80">
                                        08 9316 8111<br>
                                        PO Box 1232<br>
                                        Canning Bridge WA 6153<br>
                                        www.codegroup.com.au
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>       
                </tbody>
            </table>
        </td>
    </tr>
</table>

3 个答案:

答案 0 :(得分:1)

水平白线很可能来自第二行中的图像。

尝试在img上设置内嵌样式,以display:block; ...

<img style="display:block;" src="http://www.codegroup.com.au/images/Introduction%20Newsletter/Introduction2_image_stack2.png" />

通常会照顾它。

此外,我不确定在您发布原始问题时是否只是一个拼写错误,但第二个td中的第一个tr元素未正确关闭。您的第一个tr也只有一个td,因此您可能想要删除该元素,或者将colspan=2添加到第一行的td

答案 1 :(得分:0)

我的Mailchimp模板存在相同的问题。仅在 MS Outlook 上出现白线问题。

显然,当表的高度高于700px时,MS Outlook添加此行。因此,对我来说,解决这个愚蠢问题的方法是将电子邮件的内容分布在几个表上。因此它的高度不会超过700px

答案 2 :(得分:0)

也许您可以尝试在所有表中使用以下属性border =“ 0” cellpadding =“ 0” cellspacing =“ 0”

类似的东西

<table width="900" border="0" cellpadding="0" cellspacing="0" style="color:#4a4a4a;">
   <tr>
      <td>.....</td>
   </tr>
</table>

表可能正在生成空白