スタイルシートだけでテーブルに行番号を振る。の、メモ。

<table>
  <thead>
    <tr>
      <th></th>
      <th>見出し１</th>
      <th>見出し２</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>値１−１</td>
      <td>値１ー２</td>
    </tr>
    <tr>
      <td></td>
      <td>値２−１</td>
      <td>値２ー２</td>
    </tr>
    <tr>
      <td></td>
      <td>値３−１</td>
      <td>値４ー２</td>
    </tr>
  </tbody>
</table>

というHTMLがあったとする。

table{
  counter-reset: rowCount;
}
tbody tr{
  counter-increment: rowCount;
}
tbody tr td:first-child::before{
  content: counter(rowCount);
}

２行目：カウンタをリセット（初期値として０を設定）する。
５行目：TR要素が出現するたびにカウンタの値を＋１する。
８行目：カウンタ値をcontentプロパティとして表示させる。

そこに、こういうCSSをあてると

と、きちんと行番号を振ってくれました。