【问题标题】:How to remove white horizontal line in HTML tables如何删除 HTML 表格中的白色水平线
【发布时间】:2024-05-23 19:50:02
【问题描述】:

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

我正在创建一个带有表格布局的电子邮件营销活动。在 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>

【问题讨论】:

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


    【解决方案1】:

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

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

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

    这通常会解决它。

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

    【讨论】:

    • 不幸的是 display:block 没有帮助。我还读到这在 Outlook 中不起作用。另外,是的,这是一个错字,第二个 TR 中只有一个 TD :) 我确实希望这是我的问题的解决方案,哈哈。
    • 如何将此style 声明添加到您的table 元素:style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;
    • 不,这也不起作用,但是我确实喜欢对主表格边框所做的事情-谢谢!无论如何,我刚刚在某个地方读到了 Oulook 真的不喜欢边框。我的主表格样式标签中有一个边框,当我删除它时,白线从这两个 TR 之间消失了。所以我知道问题是从哪里开始的,但这是否意味着我现在不能在整个桌子周围设置边框?
    • 有可能...电子邮件模板真的很痛苦。在某些情况下,您最终会放弃良好的编码实践。如果你想要整个表格的边框,那么将表格包裹在 div 中并为其应用边框呢?
    • 感谢您对 Fletch 的所有帮助,但不幸的是,这些都不起作用。但是,我尝试将带有图像的 TD 移动到其上方的表格中,并添加了 colspan="3" 这似乎有效,令人惊讶!再次感谢!
    【解决方案2】:

    我的 Mailchimp 模板也有同样的问题。只有在 MS Outlook 上才会出现这个白线问题。

    当表格的高度高于700px 时,显然 MS Outlook 添加了这一行。所以对我来说,解决这个愚蠢问题的方法是将电子邮件的内容分发到几个表上。所以它不会达到高于700px的高度。

    【讨论】:

    • 这发生在我的桌子之间,这两个桌子的高度都低于 700 像素。
    【解决方案3】:

    也许您可以尝试在所有表格中使用这些属性border="0" cellpadding="0" cellspacing="0"

    类似的东西

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

    可能是表格产生了空白

    【讨论】: