Question

我正在尝试创建一个带有小表的电子邮件票证模板，客户可以在其中快速查看票证的主题和说明。到目前为止，一切看起来都很好... ...直到添加表格，完全破坏了框右侧的格式！是什么原因造成的？我曾尝试删除表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>

Answer 1

如果您打算使用电子邮件发送此模板。您需要在表格中以内联方式编写样式。否则，类将无法获得预期的结果。

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

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>

Answer 2

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

也要提早发表评论。 Outlook无法与div元素配合使用。您可能想要完全使用表来构建此模块，或者添加仅条件Outlook表

为什么HTML表会干扰CSS？

2 个答案: