如何解决使用 CSS 计数器增量时如何排除表中的第一行和最后一行
我正在使用下面的代码对表格中的行进行编号。但我需要排除第一行是头部,最后一行只是最后一行。头部的排除工作正常。我试过这个:
table#thisNet {
counter-reset: netLogCounter;
}
table#thisNet td:first-child::before {
counter-increment: netLogCounter;
}
table#thisNet tr:not(thead) tr:not(:last-child) td:first-child::before {
content: counter(netLogCounter);
}
但是这让每个空白......根本没有数字。
我也试过了:
table#thisNet tr:not(thead,last-child::before) td:first-child::before {
content: counter(netLogCounter);
}
但又没有快乐。 只有这样它才有效,但最后一行是数字。
table#thisNet tr:not(thead) td:first-child::before {
content: counter(netLogCounter);
}
是否可以将第一行和最后一行都排除在计数器增量之外,如果可以,如何?
解决方法
您可以为表创建一个计数器,并使用如下选择器在不是第一行 (:first-child
) 和最后一行 (:last-child
) 的每一行中递增它:
table#thisNet tr:not(:first-child):not(:last-child) {
counter-increment: netLogCounter;
}
在这里你可以看到一个演示:
table#thisNet {
counter-reset: netLogCounter 0;
}
table#thisNet tr:not(:first-child):not(:last-child) {
counter-increment: netLogCounter;
}
table#thisNet tr:not(:first-child):not(:last-child) td:first-child::before {
content: counter(netLogCounter);
}
<table id="thisNet">
<tr><td>ID</td><td>Value</td></tr>
<tr><td></td><td>3</td></tr>
<tr><td></td><td>2</td></tr>
<tr><td></td><td>4</td></tr>
<tr><td></td><td>6</td></tr>
<tr><td>TOTAL</td><td>15</td></tr>
</table>
理想情况下,表格的结构如下:
<table>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
</table>
然后您只想计算 tbody
内的行数,以简化选择器的逻辑:
table#thisNet tbody tr {
counter-increment: numRows;
}
做一些类似这个演示的事情:
在这里你可以看到一个演示:
table#thisNet {
counter-reset: netLogCounter 0;
}
table#thisNet tbody tr {
counter-increment: netLogCounter;
}
table#thisNet tbody tr td:first-child::before {
content: counter(netLogCounter);
}
<table id="thisNet">
<thead>
<tr><th>ID</th><th>Value</th></tr>
</thead>
<tbody>
<tr><td></td><td>3</td></tr>
<tr><td></td><td>2</td></tr>
<tr><td></td><td>4</td></tr>
<tr><td></td><td>6</td></tr>
</tbody>
<tfoot>
<tr><td>TOTAL</td><td>15</td></tr>
</tfoot>
</table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。