<table>
<tbody>
<tr class="counter-a">
<th><span>対象A</span></th>
</tr>
<tr class="counter-a">
<th><span>対象A</span></th>
</tr>
<tr class="counter-a">
<th><span>対象A</span></th>
</tr>
<tr class="counter-a">
<th><span>対象A</span></th>
</tr>
<tr class="counter-b">
<th><span>対象B</span></th>
</tr>
<tr class="counter-b">
<th><span>対象B</span></th>
</tr>
<tr class="counter-b reset">
<th><span>対象B</span></th>
</tr>
<tr class="counter-b">
<th><span>対象B</span></th>
</tr>
</tbody>
</table>
tr.counter-a {
counter-increment: a-counter;
}
tr.counter-b {
counter-increment: b-counter;
}
tr.counter-a.reset {
counter-reset: a-counter;
}
tr.counter-b.reset {
counter-reset: b-counter;
}
tr.counter-a span::before {
content: "A-"counter(a-counter) ". ";
color: red;
}
tr.counter-b span::before {
content: "B-"counter(b-counter) ". ";
color: blue;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.