Multiple CSS counters not working as expected

Question

I am trying to create multiple levels of counters in a html table, but this is not working as I expected. The first counter works ok, but the next counters do not work. Some

Answer 1

I played a bit, and it seems the issue was resetting all the counters on the same line in the body.

Here's the FIDDLE.

CSS

body {
  counter-reset: tasksteps risks measures;
}
table td {
  width: 120px;
  border: 1px solid black;
}
td.taskstep {
  counter-increment: tasksteps;
}
td.risk {
  counter-increment: risks;
}
td.measure {
  counter-increment: measures;
}
td.taskstep:before {
  content: counter(tasksteps) '. ';
}
td.risk:before {
  content: counter(tasksteps) '.' counter(risks) '. ';
}
td.measure:before {
          content: counter(tasksteps) '.' counter(risks) '.' counter(measures) '. ';
      }