为什么HTML表格会干扰CSS？

我正在尝试创建一个电子邮件票证模板，该模板具有一个小表格，客户可以快速查看其票证的主题和描述。到目前为止，一切看起来都很好。。。 …直到添加表，完全破坏框右侧的格式！ 这是什么原因造成的？我曾尝试删除表的CSS的一部分，以防某个属性破坏了所有内容，但它似乎是表本身。有没有办法绕过这个？另一种选择

下面的代码片段可能会显示为格式奇怪，但在电子邮件中看起来很完美。我也不知道该如何解释，但请相信我的话

完整的代码段：

html{
字体系列：“Lucida Sans”，无衬线；
}
.盒子{
宽度：75%；
边框：20px实心#bbbcbc；
保证金：0；
}
.个案编号{
字体大小：20px；
背景色：#535659；
颜色：白色；
宽度：100%；
填充：10px；
}
.开业日期{
字体大小：20px；
背景色：#bbbcbc；
颜色：#000000；
宽度：100%；
填充：10px；
}
.身体{
字体大小：20px；
背景色：白色；
颜色：黑色；
宽度：100%；
填充：10px；
}
.ttable th{
宽度：20；
文本对齐：左对齐；
背景色：#bbbcbc；
边框：1px实心#bbbcbc；
填充物：5px；
保证金：0；
}
.ttable td{
宽度：80%；
边框：1px实心#bbbcbc；
填充物：5px；
保证金：0；
}
案件编号
开放日期
这是车票的主体所在地。
这里的桌子

如果您计划使用电子邮件发送此模板。您需要在表中以内联方式编写样式。否则类将不会给出预期的结果

您也可以参考以下文章：

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

html{
字体系列：“Lucida Sans”，无衬线；
}
.盒子{
宽度：75%；
边框：20px实心#bbbcbc；
保证金：0；
}
.个案编号{
字体大小：20px；
背景色：#535659；
颜色：白色；
宽度：100%；
填充：10px；
}
.开业日期{
字体大小：20px；
背景色：#bbbcbc；
颜色：#000000；
宽度：100%；
填充：10px；
}
.身体{
字体大小：20px；
背景色：白色；
颜色：黑色；
宽度：100%；
填充：10px；
}
.ttable th{
宽度：20；
文本对齐：左对齐；
背景色：#bbbcbc；
边框：1px实心#bbbcbc；
填充物：5px；
保证金：0；
}
.ttable td{
宽度：80%；
边框：1px实心#bbbcbc；
填充物：5px；
保证金：0；
}
案件编号
开放日期
这是车票的主体所在地。
这里的桌子

从

正文中删除
宽度：100%
，然后删除
。表th
宽度缺少一个百分比

还想提出一个早些时候的评论。Outlook不能很好地处理div元素。您可能希望完全使用表或添加仅限Outlook的条件表来构建此模块
嗯，
.ttable td
将优先于
.body
@RobertHarvey为什么？因为CSS就是这样工作的。您在div中指定了
class=“body”
，但随后在子div中指定了
class=“ttable”
。
class=“ttable”
中的任何CSS设置都将覆盖
class=“body”
中的相应设置。CSS用于确定如何将样式继承给后代
.body
是一个类选择器，得分为10分
.ttable td
有一个类选择器（10），后跟一个类型选择器（1），总分为11分。