テーブルに行番号を振る
スタイルシートだけでテーブルに行番号を振る。の、メモ。
<table> <thead> <tr> <th></th> <th>見出し1</th> <th>見出し2</th> </tr> </thead> <tbody> <tr> <td></td> <td>値1−1</td> <td>値1ー2</td> </tr> <tr> <td></td> <td>値2−1</td> <td>値2ー2</td> </tr> <tr> <td></td> <td>値3−1</td> <td>値4ー2</td> </tr> </tbody> </table>
というHTMLがあったとする。
table{ counter-reset: rowCount; } tbody tr{ counter-increment: rowCount; } tbody tr td:first-child::before{ content: counter(rowCount); }
2行目:カウンタをリセット(初期値として0を設定)する。
5行目:TR要素が出現するたびにカウンタの値を+1する。
8行目:カウンタ値をcontentプロパティとして表示させる。
そこに、こういうCSSをあてると
見出し1 | 見出し2 | |
---|---|---|
値1−1 | 値1ー2 | |
値2−1 | 値2ー2 | |
値3−1 | 値3ー2 |
と、きちんと行番号を振ってくれました。
コメント
コメントはありません。