个人中心
gpt4 book ai didi

html - Outlook 2016 在嵌套表格下插入细线

转载 作者：行者123 更新时间：2023-11-28 06:10:44 28 4
gpt4 key购买 nike

一段时间以来，我一直对 outlook 如何显示表格 HTML 有疑问，而且我一直无法解决这个问题。基本上，有一条线穿过包含 <td> 的行。嵌套表格时(见附图中紫色 <td> 右侧的浅灰色线)。

Image1

这是我一直在使用的电子邮件代码示例。 

<style type="text/css">

   
    @media only screen and (max-width:480px){
		
		.templateColumns{
			width: 100% !important;
		}
		
		.body-text {
			font-size: 16px !important;
		}
		
		.body-about-us {
			font-size: 15px !important;
		}
		
		.center-align {
			text-align: center !important;
		}	
		
		.column-image {
			height:auto !important;
            max-width:480px !important;
            width: 100% !important;
		}
		.column-container {
			display: block !important;
			width: 100% !important;

		}
		
		.sociologos-container {
			text-align: center !important;
			margin-left: auto !important;
			margin-right: auto !important;
			padding-top: 15px !important;
			padding-bottom: 5px !important;
		}
		
		.mopad-left {
			padding-left: 15px !important;
		}
		.mopad-right {
			padding-right: 15px !important;
		}
		
		.mopad-top {
			padding-top: 15px !important;
		}
		.mopad-bottom {
			padding-bottom: 15px !important;
		}
		
		.mopad-button-bottom {
			padding-bottom: 30px !important;
		}
		
		.nopad-bottom {
			padding-bottom: 0 !important;
		}	
		
		.nopad-top {
			padding-top: 0 !important;
		}
		
		.nopad-left {
			padding-left: 0 !important;
		}
		
		.nopad-right {
			padding-right: 0 !important;
		}
		
		.modisplay-none {
			display: none !important;
		}	
		
		.mainbtn {
            max-width: 450px !important;
            width: 100% !important;
			margin-top: 10px !important;
        }

        .mainbtn a{
            display:block !important;
		}
		
		.mobold {
			font-weight: bold !important;
		}	
		
		.heading {
			font-size: 32px !important;
			line-height: 36px !important;
		}
		
		.heading2 {
			font-size: 24px !important;
			line-height: 28px !important;
		}	
		
		.heading3 {
			font-size: 20px !important;
			line-height: 20px !important;
		}	
		
		.sociologos {
			width: 32px !important;
			height: 32px !important;
		}
		
		.join-us {
			text-align: center !important;
		}
	}
	p {margin-bottom: 25px; 
	margin-top:10px;}
</style>
<body vlink="#421b3e" style="margin:0; padding: 0; background-color:#f2f2f2;"><!--this sets the visited link color, a background color and eliminates any potential auto padding on the page-->
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" id="bodytable" style="background-color:#f2f2f2; font-family: Arial, Helvetica, sans-serif;">
	<tr>
		<td align="center" valign="top" style="padding-top:0px;">
			<table border="0" cellpadding="0" cellspacing="0" width="580" class="templateColumns mopad-bottom nopad-top mopad-left mopad-right" style=" background-color: #f2f2f2; padding-top: 0; padding-bottom: 25px; margin:0;">
				
				<!-- start PURPLE HEADER -->
				<tr>
					<td width="100%" align="center" valign="top" class="templateColumns mopad-left mopad-right mopad-top mopad-bottom" id="logo" style="margin:0; background-color: #f2f2f2; padding-top: 20px; padding-bottom: 20px;">
						LOREM IPSUM   
					</td>
				</tr>
                
				<!-- end PURPLE HEADER -->
				
				
				<!-- start INTRO SECTION -->
				<tr>
					<td align="center" valign="top" class="templateColumns" width="100%" style="background-color: #ffffff; padding: margin:0;"><img class="column-image" src="http://go.advicentsolutions.com/rs/841-KAP-325/images/FosteringGrowth2016TitleBanner.png" alt="Nurturing Growth" width="580" style="display:block;" /></td>
				</tr>
				<!-- end INTRO SECTION -->
                
				<!-- start FIRST CONTENT SECTION -->
					
			  <tr>
					<td width="100%" class="mopad-left mopad-right mkteditable" id="primary-content" style="background-color: #ffffff; font-family: Arial, sans-serif; padding-top:15px; padding-bottom:30px; padding-left:40px; padding-right:40px;">
						<!--<h3 class="body-text mopad-right mopad-left" style="font-family: Arial, sans-serif; font-size: 17px; color: #3c3d42; letter-spacing: -.25px; line-height: 1.5em; font-weight: bold; margin:0; padding: 0 0 5px 0; ">Did you know?</h3>-->
					  <p class="heading2" style="text-align:center; font-size: 28px; color: #3c3d42; line-height: 30px;">lorem ipsum</p>
						<p class="margin" style="text-align:center; font-family: Arial, sans-serif; font-size: 16px; color: #727577; line-height: 22px; font-weight: 400; ">lorem ipsum</p>
						<table align="center" cellpadding="0" cellspacing="0" width="60%" style="background-color:#6a3757; border-radius: 2px; font-family: Arial, sans-serif; padding:2px; margin: auto;">
							<tr>
								<td align="center" style="font-family: Arial, sans-serif; color: #ffffff; border-radius: 4px; background-color: #6a3757; padding-top: 10px; padding-bottom: 10px;"><strong>lorem ipsum</strong></td>
							</tr>	
						</table>
					  </td>
				</tr>
				<!-- end MAIN CTA BUTTON -->
				
				
				
						
				
				<!-- start SOCIAL MEDIA SECTION -->
				<tr>
					<td width="100%" class="templateColumns mopad-bottom mopad-top mopad-left mopad-right" id="social-media" style="font-family: Arial, Helvetica, sans-serif; background-color: #f2f2f2; padding-left: 5px; padding-right: 5px; padding-bottom: 10px; padding-top: 10px; margin:0; ">
						<table width="100%" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td align="left" valign="middle" class="column-container join-us" width="50%" style="font-family: Arial, sans-serif; font-size: 14px; color: #3c3d42; ">
									Join the Community!
							   </td>
							   <td aLOREM IPSUM class="column-container"  width="50%">
									<table cellpadding="0" class="sociologos-container" cellspacing="0" style="font-family: Arial, sans-serif;">
										<tr>
											<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/google_42.png" width="32" height="32" alt="Google Plus" /></td>
											<td align="left" class="sociologos" valign="top" style="padding-left: 5px;">><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/twitter_42.png" width="32" height="32" alt="Twitter" /></td>
											<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/facebook_42.png" width="32" height="32" alt="Facebook" /></td>
											<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/linked_42.png" width="32" height="32" alt="LinkedIn" /></td>
											<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" class="sociologos" style="display: block; padding-left:5px;" src="http://www.advicentsolutions.com/images/email/youtube_42.png" width="32" height="32" alt="Youtube Channel" /></td>
							   
										</tr>
									</table>
							   </td>
						   </tr>
						</table>
					</td>
				</tr>
				<!-- end SOCIAL MEDIA SECTION -->
				
				
				<!-- start DISCLAIMER -->
				<tr>
					<td align="left" valign="top" width="100%" class="templateColumns mopad-bottom mopad-top mopad-left mopad-right" id="disclaimer" style="color:#727577; font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-left: 5px; padding-right:5px; padding-top:10px; margin:0;">
					LOREM ISPUM
					</td>
				</tr>
				<!-- end DISCLAIMER -->
						
					
			</table>
		</td>
   </tr>
</table>
    
</body>

它可以像 HTML 一样很好地显示，但我发送的主要是 B2B 内容，这意味着我们一直在努力针对 Office 进行优化。有时横幅图像的大小会影响它，但除了那个因素之外，何时发生这种情况似乎完全是任意的。这是我无法弄清楚的一个 Outlook 解决方法。我的代码中是否缺少某些内容？

最佳答案

Finnnaaalllly 在发布后大约十分钟找到了解决方案。诀窍是删除与代码中表格内的 Lorem ipsum 文本相关的填充内联 css。

我还在其他情况下修复了这个 <p>应用于 tds 中链接的标签也引起了问题。删除 <p>表格中链接周围的标签以及伴随它的任何填充解决了这个问题。

关于html - Outlook 2016 在嵌套表格下插入细线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36188364/

28 4 0
文章推荐： c++ - OpenGL:二维四边形应该如何存储/渲染？
文章推荐： javascript - js如何显示隐藏组件
文章推荐： c++ - GetFileAttributes 为不存在的文件返回 FILE_ATTRIBUTE_ARCHIVE
文章推荐： javascript - MDL菜单点击鼠标右键打开bug
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com