Как убрать белую горизонтальную линию в HTML-таблицах
Я думаю, что я обыскал все уголки сети, чтобы попытаться решить эту проблему. Я обнаружил похожие проблемы по всем направлениям, но ни одно из решений не помогло мне (либо это, либо я что-то упустил).
Я создаю почтовую кампанию с макетом таблицы. В FF, Chrome и IE все выглядит великолепно, но когда я тестирую его в Outlook 2010, он выдает мне горизонтальную белую линию между 2 TR, которые находятся в главной таблице страницы.
Пожалуйста, соблюдайте 2 ТР ниже:
ПРИМЕЧАНИЕ: я редактировал этот вопрос, чтобы включить весь код:
<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 </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>
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 в первом ряду.
Возможно, вы можете попробовать во всех ваших таблицах использовать эти свойства border="0" cellpadding="0" cellspacing="0"
что-то вроде этого
<table width="900" border="0" cellpadding="0" cellspacing="0" style="color:#4a4a4a;">
<tr>
<td>.....</td>
</tr>
</table>
возможно, таблица генерирует это пустое пространство
У меня была такая же проблема с моим шаблоном Mailchimp. Только в MS Outlook эта проблема с белой линией проявилась.
По-видимому, MS Outlook добавляет эту строку, когда высота таблицы становится выше, чем 700px. Поэтому для меня решением этой глупой проблемы было распределить содержимое письма по нескольким таблицам. Таким образом, он не достигает высоты выше, чем700px.