Menu
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. Somehow the counters are not incrementing or are reset wrongly?
The code:
<html>
<head>
<title>Counter Demo</title>
<style>
table.tasksteps {
counter-reset: tasksteps;
}
td.taskstep {
counter-reset: risks;
counter-increment: tasksteps;
}
td.risk {
counter-reset: measures;
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) '. ';
}
</style>
</head>
<body>
<table class="tasksteps">
<thead>
<tr>
<td>TaakStep</td>
<td>Risk</td>
<td>Measure</td>
</tr>
</thead>
<tbody>
<tr>
<td class="taskstep t1">Step 1</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="taskstep t2">Step 2</td>
<td class="risk">Risk 1</td>
<td></td>
</tr>
<tr>
<td class="t3"></td>
<td class="risk">Risk 2</td>
<td></td>
</tr>
<tr>
<td class="taskstep t2">Step 3</td>
<td class="risk">Risk 3</td>
<td></td>
</tr>
<tr>
<td class="taskstep t2">Step 4</td>
<td class="risk">Risk 4</td>
<td></td>
</tr>
<tr>
<td class="t4"></td>
<td class="risk">Risk 5</td>
<td class="measure">Measure 1</td>
</tr>
<tr>
<td class="t5"></td>
<td></td>
<td class="measure">Measure 2</td>
</tr>
<tr>
<td class="t5"></td>
<td></td>
<td class="measure">Measure 3</td>
</tr>
<tr>
<td class="t5"></td>
<td></td>
<td class="measure">Measure 4</td>
</tr>
<tr>
<td class="t3"></td>
<td class="risk">Risk 6</td>
<td></td>
</tr>
<tr>
<td class="t4"></td>
<td class="risk">Risk 7</td>
<td class="measure">Measure 5</td>
</tr>
</tbody>
</table>
</body>
</html>
This gives output:
Fiddle
915
There are 2 problems here:
The direct parent of the first counted element should contain all the other counted elements. In your case, the first counted element is a td in a row, so its parent is a tr but all the other counted elements have their own parents of tr (which are siblings of the parent of the first counted element). So to fix this I think you have to set the class on the tr and count it there.
The counter-reset and counter-increment can be overridden, that means if at one tr, you need to use counter-reset and counter-increment for more than 1 counter variable, you need to put them on the same declaration (space-separated) for counter-reset and counter-increment.
From 2 points above, here is the code it should be:
HTML:
<table class="tasksteps">
<thead>
<tr>
<td>TaakStep</td>
<td>Risk</td>
<td>Measure</td>
</tr>
</thead>
<tbody>
<tr class="taskstep">
<td class="taskstep t1">Step 1</td>
<td></td>
<td></td>
</tr>
<tr class="taskstep risk">
<td class="taskstep t2">Step 2</td>
<td class="risk">Risk 1</td>
<td></td>
</tr>
<tr class="risk">
<td class="t3"></td>
<td class="risk">Risk 2</td>
<td></td>
</tr>
<tr class="taskstep risk">
<td class="taskstep t2">Step 3</td>
<td class="risk">Risk 3</td>
<td></td>
</tr>
<tr class="taskstep risk">
<td class="taskstep t2">Step 4</td>
<td class="risk">Risk 4</td>
<td></td>
</tr>
<tr class="risk">
<td class="t4"></td>
<td class="risk">Risk 5</td>
<td class="measure">Measure 1</td>
</tr>
<tr>
<td class="t5"></td>
<td></td>
<td class="measure">Measure 2</td>
</tr>
<tr>
<td class="t5"></td>
<td></td>
<td class="measure">Measure 3</td>
</tr>
<tr>
<td class="t5"></td>
<td></td>
<td class="measure">Measure 4</td>
</tr>
<tr class="risk">
<td class="t3"></td>
<td class="risk">Risk 6</td>
<td></td>
</tr>
<tr class="risk">
<td class="t4"></td>
<td class="risk">Risk 7</td>
<td class="measure">Measure 5</td>
</tr>
</tbody>
</table>
CSS:
table.tasksteps {
counter-reset: tasksteps;
}
tr.taskstep {
counter-reset: risks;
counter-increment: tasksteps;
}
tr.risk {
counter-reset: measures;
counter-increment: risks;
}
tr.taskstep.risk {
counter-reset: risks measures;
counter-increment: tasksteps 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) '. ';
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
