HTML Heading counter within table

Question

I need to have text formatted in table where second column contains the text, some rows contains heading H1 - H5. I would like to use auto numbering for the heading but the increment does not work within table.

Problem is that the H2 level counter is not increasing there is always 1.1 as the heading number.

Can you please help, where is the problem?

body {
  counter-reset: h1counter;
}

h1 {
  counter-reset: h2counter;
}

h2 {
  counter-reset: h3counter;
}

h1:before {
  counter-increment: h1counter;
  content: counter(h1counter) ". ";
}

h2:before {
  counter-increment: h2counter;
  content: counter(h1counter) "."counter(h2counter) ". ";
}

h3:before {
  counter-increment: h3counter;
  content: counter(h1counter) "."counter(h2counter) "."counter(h3counter) ". ";
}

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <h1>Heading 1</h1>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <h2>Heading 1.1</h2>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>
        <h2>Heading 1.2</h2>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>
        <h1>Heading 2.</h1>
      </td>
    </tr>
  </tbody>
</table>