仅对具有特定类的表的元素使用CSS样式

我从来都不擅长CSS,现在已经过了午夜,所以如果这个问题太简单,我深表歉意。

我的桌子是这样的:

使用此CSS:

.zebra_stripe_table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

tbody.zebra_stripe_table 
{
  border-collapse: collapse;
  border: 1px solid #ddd;
} 

tr.zebra_stripe_table th.zebra_stripe_table td.zebra_stripe_table {
  text-align: center;
  /* padding: 16px; */
  border: 1px solid #ddd;
}

.zebra_stripe_table tr:nth-child(even) {
  background-color: #f2f2f2;
}

我更喜欢在表上有垂直的列,比如:

这是我用

.zebra_stripe_table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

  .zebra_stripe_table tbody
{
  border-collapse: collapse;
  border: 1px solid ddd;
}

.zebra_stripe_table tr, th, td {
  text-align: center;
  /* padding: 16px; */
  border: 1px solid #ddd;
}

.zebra_stripe_table tr:nth-child(even) {
  background-color: #f2f2f2;
}

差别正在改变

tr.zebra_stripe_table th.zebra_stripe_table td.zebra_stripe_table

到

.zebra_stripe_table tr, th, td

但是,这会将单元格边框添加到AngularJS项目中唯一的另一个表(它没有“zebra\u stripe\u table”类)。

因此,我认为第一种语法是正确的,只对类的tr、th和td应用样式 zebra_stripe_table .

问题,我怎么才能得到这些垂直条纹呢?