cssでtableに行番号をつける

cssのcounterとtr要素の:before擬似要素とを組み合わせることで，簡単な記述だけで行番号の自動挿入が可能だ．
:beforeのdisplayスタイルをtable-cellに設定することで行の先頭に新たなセルが配置されるので，この中身にcounterで計算した行番号を流しこむのがミソ． プログラムで番号を挿入するよりもお手軽だけど，番号自体にキー的な意味をもつ場合はオススメしない．要はExcelの行番号のように番地を表す際に有効なテクニックと言える．

<style type="text/css">
 #autoNumberedTable table,#autoNumberedTable th,#autoNumberedTable td{
  border:solid 1px black;
 }
 #autoNumberedTable th,#autoNumberedTable td{
  width:50px;
 }
 #autoNumberedTable thead>tr{
  background-color:yellow;
 }
 #autoNumberedTable tbody>tr{
  background-color:lightyellow;
 }
 #autoNumberedTable tr:before{
  display:table-cell;
  border:solid 1px red;
 }
 #autoNumberedTable tbody{
  counter-reset:rowNum 0;
 }
 #autoNumberedTable thead>tr:before{
  content:"№";
 }
 #autoNumberedTable tbody>tr:before{
  counter-increment:rowNum 1;
  content:counter(rowNum, decimal-leading-zero);
 }
</style>