テーブルに自動で行数を表示する

Result

See the Pen CSS table row numeration by kachibito (@kachibito) on CodePen.

tableに行数を表示します。疑似要素にcss-countersで加えています。
前後に任意のテキストも挿入できます。

css

body {/*カウンターリセット*/
  counter-reset: row-counter;
}

tr {
  position: relative;
}

tr:before {/*行の頭に疑似要素を追加してカウント*/
  position: relative;
  padding: 10px;
  display: block;
  bottom: 0;
  counter-increment: row-counter;
  content: "第"counter(row-counter)"行目";
}

html

<table>
  <tr>
    <td>foo</td>
    <td>bar</td>
    <td>hoge</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>bar</td>
    <td>hoge</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>bar</td>
    <td>hoge</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>bar</td>
    <td>hoge</td>
  </tr>
</table>

can i use

css-countersのブラウザ対応状況です

via

CSS table row numeration