表格行的 CSS 自动编号 - 不是第一个？答案

【问题标题】：CSS auto numbers for table rows - not first?表格行的 CSS 自动编号 - 不是第一个？
【发布时间】：2017-02-21 20:13:08
【问题描述】：

我有以下代码用于将行数应用于动态表 -

.ftable table {
    counter-reset: rowNumber;
}

.ftable tr {
    counter-increment: rowNumber;
}

.ftable tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

来自 (Auto-number table rows?)

是否可以忽略第一行（第一行是我的标题行 - 如果有帮助，它有一个 fble_htr 类）

【问题讨论】：

您可以将第一行放在thead 元素中，将其他行放在tbody 中

标签： css

【解决方案1】：

是的：

.ftable tr:not(.fble_htr) {
    counter-increment: rowNumber;
}

.ftable tr:not(.fble_htr) td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

除了tr:not(.fble_htr)，您还可以使用tr:not(:first-child) 或tr + tr。

如 cmets 中所述，如果您可以修改 HTML，另一种选择是将标题行移动到 thead 元素中，将其余行移动到 tbody 元素中，然后选择 .ftable tbody tr .ftable tr:not(.fble_htr).

【讨论】：

tr:not(:first-child) 工作完美。并且更具可读性

【解决方案2】：

如果您将表格标记为右侧，则第一行应该是 thead，因此您可以使用：

.rlstable {
 counter-reset: row-num;
}
.rlstable tbody tr  {
counter-increment: row-num;
}

.rlstable tr td:first-child::before {
content: counter(row-num) ". ";
}
.rlstable tr td:first-child {
text-align: center;
}

【讨论】：

但第一个答案更完整。