为什么HTML表会干扰CSS？

问题描述 投票：0回答：2

我正在尝试创建一个电子邮件票证模板，其中包含一个小表，客户可以快速查看其票证的主题和描述。到目前为止，一切看起来都很好...... good ...直到桌子被添加，完全破坏了盒子右侧的格式！ enter image description here造成这种情况的原因是什么？我已经尝试删除表的CSS的一部分，以防某个属性正在破坏所有内容，但它似乎是表本身。有没有办法绕过这个？替代？

下面的代码段可能显示为奇怪格式，但在电子邮件中看起来很完美。我不确定如何解释这一点，但请相信我的话。

完整片段：

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			html {
				font-family: "Lucida Sans", sans-serif;
			}
			.box {
				width: 75%;
				border: 20px solid #bbbcbc;
				margin: 0;
			}
			.case-number {
				font-size: 20px;
				background-color: #535659;
				color: white;
				width: 100%;
				padding: 10px;
			}
			.date-opened {
				font-size: 20px;
				background-color: #bbbcbc;
				color: #000000;
				width: 100%;
				padding: 10px;
			}
			.body {
				font-size: 20px;
				background-color: white;
				color: black;
				width: 100%;
				padding: 10px;
			}
			.ttable th {
				width: 20;
				text-align: left;
				background-color: #bbbcbc;
				border: 1px solid #bbbcbc;
				padding: 5px;
				margin: 0;
			}
			.ttable td {
				width: 80%;
				border: 1px solid #bbbcbc;
				padding: 5px;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="case-number">case number</div>
			<div class="date-opened">date opened</div>
			<div class="body">
				this is where the body of the ticket will be.
				<div class="ttable">
					table here
				</div>
			</div>
		</div>
	</body>
</html>

打破的片段：

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			html {
				font-family: "Lucida Sans", sans-serif;
			}
			.box {
				width: 75%;
				border: 20px solid #bbbcbc;
				margin: 0;
			}
			.case-number {
				font-size: 20px;
				background-color: #535659;
				color: white;
				width: 100%;
				padding: 10px;
			}
			.date-opened {
				font-size: 20px;
				background-color: #bbbcbc;
				color: #000000;
				width: 100%;
				padding: 10px;
			}
			.body {
				font-size: 20px;
				background-color: white;
				color: black;
				width: 100%;
				padding: 10px;
			}
			.ttable th {
				width: 20;
				text-align: left;
				background-color: #bbbcbc;
				border: 1px solid #bbbcbc;
				padding: 5px;
				margin: 0;
			}
			.ttable td {
				width: 80%;
				border: 1px solid #bbbcbc;
				padding: 5px;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="case-number">case number</div>
			<div class="date-opened">date opened</div>
			<div class="body">
				this is where the body of the ticket will be.
				<div class="ttable">
					<table>
						<tr>
							<th>Subject</th>
							<td>TICKET SUBJECT HERE</td>
						</tr><tr>
							<th>Description</th>
							<td>TICKET DESCRIPTION HERE</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>
html css html-email
2个回答
0
投票

如果您打算使用电子邮件发送此模板。你需要在表格中将你的风格写成内联。其他类不会给出预期的结果。

你也可以参考下面的文章::

https://emailmonks.com/blog/email-coding/step-step-guide-create-html-email/


<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			html {
				font-family: "Lucida Sans", sans-serif;
			}
			.box {
				width: 75%;
				border: 20px solid #bbbcbc;
				margin: 0;
			}
			.case-number {
				font-size: 20px;
				background-color: #535659;
				color: white;
				width: 100%;
				padding: 10px;
			}
			.date-opened {
				font-size: 20px;
				background-color: #bbbcbc;
				color: #000000;
				width: 100%;
				padding: 10px;
			}
			.body {
				font-size: 20px;
				background-color: white;
				color: black;
				width: 100%;
				padding: 10px;
			}
			.ttable th {
				width: 20;
				text-align: left;
				background-color: #bbbcbc;
				border: 1px solid #bbbcbc;
				padding: 5px;
				margin: 0;
			}
			.ttable td {
				width: 80%;
				border: 1px solid #bbbcbc;
				padding: 5px;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="case-number">case number</div>
			<div class="date-opened">date opened</div>
			<div class="body">
				this is where the body of the ticket will be.
				<div class="ttable">
					table here
				</div>
			</div>
		</div>
	</body>
</html>
0
投票

从width:100%删除.body然后.ttable th宽度缺少％。

也提出早先的评论。 Outlook不适合使用div元素。您可能希望完全使用表格构建此模块，或者添加条件Outlook仅表格

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.