Question

我有一个需要条纹的表，但它有一些行可能会在以后隐藏。隐藏一些行后，不会发生重新条带化，因此条带化是关闭的。如何强制表重新划分自己？这是我觉得应该工作的我的CSS，但事实并非如此。然后也是我的HTML。

.isHidden {
    display:none;
}

tbody {
    tr:not(.isHidden):nth-child(odd) {
        background: rgb(238, 238, 238);
    }
}

<tbody>
        <tr [ngClass]="{'isHidden': !line.get('isVisible').value}" *ngFor="let line of lineDetailsArray.controls; let i=index;">
...
</tr>
</tbody>

Answer 1

目前，遗憾的是，您无法仅使用CSS解决问题。没错，有一个可能有用的补充in the spec - :nth-child(An+B of S)。 The following example完全符合您的情况：

通常，对于表格行的斑马条纹，作者会使用CSS 类似于以下内容：

tr {
  background: white;
}
tr:nth-child(even) {
  background: silver;
}

但是，如果某些行被隐藏而未显示，则此操作可以分解模式，导致多个相邻的行拥有相同的背景颜色。假设用[{1}}隐藏行在HTML中的属性，以下CSS将斑马条纹表行强有力的，保持适当的交替背景，无论如何哪些行是隐藏的：

[hidden]

警告？在浏览器中对此选项的支持甚至不受限制：它是non-existent。

但是，仍然存在摆脱这种苦难的方法。尽管Angular不会让tr { background: white; } tr:nth-child(even of :not([hidden])) { background: silver; }和ngIf放在一个元素上（我想这太简单了），但有一种解决方法 - 使用ngFor作为占位符：

<ng-container>

Demo（感谢@imkremen帮助创建此内容。）

隐藏行后角度重新应用表条带

1 个答案: