代码之家 › 专栏 › 技术社区 › Mawg says reinstate Monica

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

css-selectors html-table css

0

Mawg says reinstate Monica · 技术社区 · 5 年前

我从来都不擅长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 .

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

1 回复 | 直到 5 年前

1

Johannes 5 年前

对于单元格内部的中心对齐,请更改此选择器

.zebra_stripe_table tr, th, td { ... }

对此:

.zebra_stripe_table th, .zebra_stripe_table td {... }

(您不需要包括 tr 给你,但你需要 .zebra_stripe_table 作为父母* th 和 td )

关于行的交替背景色,将上一个CSS规则从

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

到

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

(这是细胞获取背景,而不是行)