<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.