除最后一行之外的枚举行的表答案

【问题标题】：Table with enumerated rows except the last one除最后一行之外的枚举行的表
【发布时间】：2015-08-04 13:45:05
【问题描述】：

我怎样才能有一个除了最后一行之外有数字行的表格？我正在尝试下面的代码，但它不起作用:(

编辑： 以下代码适用于 Chrome 和 Firefox，但不适用于 Safari。我还不了解 IE

table.enumerated {
    counter-reset: rowNumber;
}

table.enumerated > tbody > tr {
    counter-increment: rowNumber;
}

table.enumerated > tbody > tr > td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
}
table.enumerated > tbody > tr:last-child > td:first-child::before {
    content: unset;
}

<table border="1" class="enumerated">
    <tr>
        <td></td><td>one</td>
    </tr>
    <tr>
        <td></td><td>two</td>
    </tr>
    <tr>
        <td></td><td>three</td>
    </tr>
    <tr>
        <td class='no-number'></td><td>no number</td>
    </tr>
</table>

【问题讨论】：

它到底是怎么不起作用的？ sn-p 看起来就像你想要的那样。
哦！你是对的。我刚刚意识到它适用于 Chrome 和 Firefox，但不适用于 Safari。你有 Safari 的解决方法吗？
@nacho4d：实际上，我在 Chrome v38 上，它也在最后一行显示计数器值，所以它也不能在 Chrome 中普遍工作。也许他们在最近的版本中修复了一些问题。
哪个版本的 Safari？
我在 Safari 8.0.7 中仍然看到最后一行编号 4

标签： html css

【解决方案1】：

在 tr 上使用 :not(:last-child) 怎么样，那么您将不需要 unset 或 none 技巧。

table.enumerated {
    counter-reset: rowNumber;
}

table.enumerated > tbody > tr {
    counter-increment: rowNumber;
}

table.enumerated > tbody > tr:not(:last-child) > td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
}

<table border="1" class="enumerated">
    <tr>
        <td></td><td>one</td>
    </tr>
    <tr>
        <td></td><td>two</td>
    </tr>
    <tr>
        <td></td><td>three</td>
    </tr>
    <tr>
        <td class='no-number'></td><td>no number</td>
    </tr>
</table>

不幸的是，Safari 5.1.7 是我唯一可以测试的版本。是的，我知道。但它甚至可以在那里工作！

【讨论】：

鉴于:not 实际上不会导致浏览器支持的任何下降（因为无论如何都使用了last-child），这是更好的选择。
@Harry 我希望如此。如果不查找这些“更新”功能，我永远不会记得浏览器支持有多好。另外，如果我似乎试图取消其他答案，对此感到抱歉。不是我的本意！这只是我想尝试的第一件事。
@MrLister：当然不是伙伴 :) 发布更好的答案并提供尽可能多的选项供 OP 根据他们的需要选择总是好的。干杯:)

【解决方案2】：

您应该使用content: none;，因为未设置browser support 是没有保证的。它在 Chrome 和 Firefox 中运行良好，但在 IE、Safari 和 Opera 中运行良好。

table.enumerated > tbody > tr:last-child > td:first-child::before {
    content: none;
}

【讨论】：