How to automatically continue ordered list numbering in table rows

I’m hoping to find a (preferably vanilla) JavaScript solution that will allow me to automatically continue an ordered list in multiple table rows. I want to accomplish the same thing as hard coding but without having to hard code anything. This is the end result I’m after:

table {
  /*border: 1px solid black;*/
}

td {
  padding-right: 20px;
  border: 1px solid black;
}

<table>
  <tr>
    <td>
      <ol>
        <li>Do this</li>
        <li>Then do this</li>
        <li>After that, do this</li>
      </ol>
    </td>
    <td>Image goes here</td>
  </tr>
  <tr>
    <td>
      <ol start="4">
        <li>Then do this</li>
      </ol>
    </td>
    <td>Image goes here</td>
  </tr>
  <tr>
    <td>
      <ol start="5">
        <li>Then do that</li>
        <li>And then do this</li>
    </td>
    <td>Image goes here</td>
  </tr>
</table>

This is for a series of articles with step-by-step instructions. The articles will be written by non-coders, which is why I don’t want them to have to hard code anything. Also, if any steps are added or subtracted in the future, I don’t want them to have to go in to the code to reorder all the steps by hand.

I’m using a table to keep images aligned with their associated steps because that’s what the article writers are familiar with, and because I’m able to convince myself that the steps and their associated images are data, and therefore appropriate to display in a table, rather than trying to tackle this from a CSS layout perspective, which would be even harder for my non-coding article writers. 🙂

Answer

Using CSS, you can keep track of the element number using a counter().

If you target the table li you can insert a pseudo-element just as described on this MDN documentation

table { counter-reset: li; }
table li::before {
    counter-increment: li;
    content: counter(li) ". ";
}
ol { list-style: none; }

<table>
<tr>
  <td>
    <ol><li>first</li><li>second</li></ol>
  </td>
</tr>
<tr>
  <td>
    <ol><li>third</li><li>fourth</li></ol>
  </td>
</tr>
</table>

Advertisement

Answer