CSS счетчик для HTML-таблицы
Автоматическая нумерация строк HTML-таблицы:
| Header |
|---|
| Data 1 |
| Data 2 |
| Data 3 |
HTML код:
<table>
<tr>
<th>Header</th>
</tr>
<tr>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
</tr>
</table>
CSS код:
table {counter-reset: number -1;}
table tr {counter-increment: number;}
table td:before {content: counter(number) ".";}
Примечания
- Значение «-1» в «counter-reset: number -1» задаёт пропуск первой строки с заголовком в теге th.
Поддержка в браузерах
- Windows
- Internet Explorer 8.0+
- Firefox 1.0+
- Google Chrome 2.0+
- Opera 9.2+
- Linux
- Firefox 1.0+
- Google Chrome 2.0+
- Opera 9.2+
- iOS
- Safari 1.0+
- Android
- Samsung Internet 1.0+
- Chrome Android 18.0+
- Firefox for Android 25.0+
- Opera Android 10.1+