Result
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のブラウザ対応状況です
