如何在单个样式表中为两个不同表格设置差异化CSS样式？

你的核心问题是CSS选择器写法错误，导致两个表格的样式无法区分——原来的.table1, th, td这种写法是把.table1、所有<th>、所有<td>作为三个独立选择器，这会让页面里所有的表头和单元格都被同时应用两个表格的样式规则，自然无法区分。

修正方案：使用后代选择器 #

通过后代选择器，精准指定某类表格下的表头和单元格样式，就能实现两个表格样式完全独立。

修正后的CSS代码示例

body {
  font-family: verdana;
}

/* Table 1 专属样式 */
/* 表格本身的样式 */
.table1 {
  /* 可添加表格级别的样式，比如宽度、外边距等 */
  width: 50%;
  margin-bottom: 20px;
}
/* 表格1内的表头和单元格 */
.table1 th,
.table1 td {
  color: #030099;
  border: 1px solid black;
  border-width: 0px 1px 1px 1px;
  font-size: 110%;
}

/* Table 2 专属样式 */
/* 表格本身的样式 */
.pcsetup {
  width: 70%;
  background-color: #f8f8f8;
}
/* 表格2内的表头和单元格 */
.pcsetup th,
.pcsetup td {
  /* 这里可以写和表格1完全不同的样式 */
  color: #990003;
  border: 1px solid gray;
  border-width: 1px 0px 0px 1px;
  font-size: 100%;
}

.tc1 {
  background-color: white;
  border: 2px solid black;
  padding: 5px;
}

原理说明 #

• .table1 th 只会选中class为table1的表格内部的<th>元素，不会影响其他表格的表头；
• .pcsetup td 只会选中class为pcsetup的表格内部的<td>元素，同理不会干扰其他表格；
• 表格本身的样式（如宽度、背景色）也通过各自的class单独设置，完全隔离两个表格的样式规则。

你的HTML结构不需要修改，保持现有两个表格的class分别为table1和pcsetup即可。

内容的提问来源于stack exchange，提问作者user20197071