HTML - CSS - counter 連番を振る

 
1. 概要
2. やってみる

1. 概要

 箇条書きにしたものは連番を振りたいのは人情である。  そうなれば、テーブルにも行番号を振りたいですよね。  <ol><li> を使うと箇条書きに連番を振ることができますが。

<ol>
 <li> あ
 <li> い
 <li> う
</ol>
 と書きゃ
     
  1. あ  
  2. い  

 と表示されるわけですが・・・。

 テーブルの行番号にいれようと


<ol>
<table>
<tr><td><li></td><td>あ</td></tr>
<tr><td><li></td><td>い</td></tr>
<tr><td><li></td><td>う</td></tr>
</table>
</ol>

 てな感じで <li> は、セルの外に書かれるのだ。
 なので、テーブルに行番号をつけるには地道にセルに数字を書き入れていました。
 行数の多いテーブルで、行の入替が発生したりするとかなり面倒なことになってしまうのです。
 コンピュータにやらせることなのになんだかなぁ・・・と思っていたら、CSS でそれを解決できるようなのです。

 本項は「CSS でテーブルに行番号を振る - Qiita」を参考にさせていただきました。

 counter の詳細については「CSS カウンターの使用 - ウェブデベロッパーガイド | MDN」をご参照ください。
 これによれば、入れ子にして「1」「1.1」などの振り方もできるようです。

2. やってみる


 CSS で


table.sample2 { margin-left: 1em; bordder: 1px solid black; counter-reset: rowCount; }
table.sample2 > tbody > tr { counter-increment: rowCount; }
table.sample2 > tbody > tr > td:first-child::before { content: counter(rowCount); }
table.sample2 td { border: 1px solid black;}
 と書いて、HTML に

</pre><ol><table><tbody>
<tr><td></td><td>あ</td></tr>
<tr><td></td><td>い</td></tr>
<tr><td></td><td>う</td></tr></tbody>
</table></ol><pre>
 と書けば

 てな感じで。
 見た目は調整していないので、不細工ですが、自動で番号を振ることができました。

 ちなみに、普段はきちんと <tbody> を書いたりしないのですが、この場合、<tbody> をつけないと反映されませんでした。