如何让自定义CSS仅作用于指定class的单个HTML表格

你的问题出在CSS选择器的写法上——当你用逗号分隔多个选择器时，每个选择器都需要单独加上.mytable前缀，否则逗号后面的选择器会变成全局选择器，影响页面上所有表格的对应元素。

比如你原来的代码里这一行：

.mytable thead, tbody, tr, td, th { display: block; }

这里只有.mytable thead是针对目标表格的，而tbody、tr、td、th会选中页面上所有表格的这些元素，这就是为什么其他表格也被影响了。

下面是修正后的完整CSS代码，所有选择器都严格绑定到.mytable类：

.mytable { 
  width: 100%; 
  border-collapse: collapse; 
  border-spacing: 0; 
  border: 2px solid black; 
}
.mytable thead, 
.mytable tbody, 
.mytable tr, 
.mytable td, 
.mytable th { 
  display: block; 
}
.mytable tr:after { 
  content: ' '; 
  display: block; 
  visibility: hidden; 
  clear: both; 
}
.mytable thead th { 
  height: 30px; 
  line-height: 30px; 
  /*text-align: left;*/ 
}
.mytable tbody { 
  height: 100px; 
  overflow-y: auto; 
}
.mytable thead { 
  /* fallback */ 
  width: 97%; 
  /* minus scroll bar width */ 
  width: calc(100% - 17px); 
}
.mytable tbody { 
  border-top: 2px solid black; 
}
.mytable tbody td, 
.mytable thead th { 
  width: 19.2%; 
  float: left; 
  border-right: 1px solid black; 
}
.mytable tbody td:last-child, 
.mytable thead th:last-child { 
  border-right: none; 
}

关键修正点说明： #

• 所有包含多个选择器的声明行，每个选择器都单独添加了.mytable前缀，确保样式只作用在带有.mytable类的表格内部元素上
• 完全保留了原有的表格滚动、边框布局效果，仅仅限制了样式的作用范围

这样修改后，你的目标表格会正常呈现预期的滚动效果，而页面上其他没有.mytable类的表格不会受到任何影响。

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