Автоматическая нумерация строк таблицы | CSS

Как сделать, чтобы в ячейках первого столбца был порядковый номер 1,2,3... строки

Первая таблица
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
Вторая таблица
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка 
<style>
.demotable {
  border-collapse: collapse;
  counter-reset: schetchik;  /* счётчик с названием "schetchik" работает в рамках класса .demotable */ 
}
.demotable tr {
  counter-increment: schetchik;  /* при встрече тега tr счётчик с названием "schetchik" увеличивается на единицу */ 
}
.demotable td,
.demotable tr:before {
  padding: .1em .5em;
  border: 1px solid #E7D5C0;
}
.demotable tr:before {
  content: counter(schetchik);  /* значение счётчика с названием "schetchik" записывается в первую клетку строки */ 
  display: table-cell;
  vertical-align: middle;
  color: #978777;
}
</style>

Первая таблица
<table class="demotable">
  <tr><td>вторая ячейка<td>третья ячейка
  <tr><td>вторая ячейка<td>третья ячейка
  <tr><td>вторая ячейка<td>третья ячейка
</table>
Вторая таблица
<table class="demotable">
  <tr><td>вторая ячейка<td>третья ячейка
  <tr><td>вторая ячейка<td>третья ячейка
  <tr><td>вторая ячейка<td>третья ячейка
  <tr><td>вторая ячейка<td>третья ячейка
</table>

Что нужно сделать, чтобы в нескольких HTML-таблицах не прерывалась нумерация строк

Первая таблица
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
Вторая таблица
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка 
<style>
.demotable {
  counter-reset: schetchik;
}
.demotable table {
  border-collapse: collapse;
}
.demotable tr {
  counter-increment: schetchik;
}
.demotable td,
.demotable tr:before {
  padding: .1em .5em;
  border: 1px solid #E7D5C0;
}
.demotable tr:before {
  content: counter(schetchik);
  display: table-cell;
  vertical-align: middle;
  color: #978777;
}
</style>

<div class="demotable">
  Первая таблица
  <table>
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
  </table>
  Вторая таблица
  <table>
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
  </table>
</div>

Как сделать подпункты во вложенных таблицах

вторая ячейкатретья ячейка
вторая ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка 
<style>
.demotable {
  border-collapse: collapse;
  counter-reset: schetchik;
}
.demotable tr {
  counter-increment: schetchik;
}
.demotable td,
.demotable tr:before {
  padding: .1em .5em;
  border: 1px solid #E7D5C0;
}
.demotable tr:before {
  content: counter(schetchik);
  display: table-cell;
  vertical-align: middle;
  color: #978777;
}
</style>

<table class="demotable">
  <tr>
    <td>вторая ячейка
    <td>третья ячейка
  <tr>
    <td>вторая ячейка
    <td>
      <table class="demotable">
        <tr><td>вторая ячейка<td>третья ячейка
        <tr><td>вторая ячейка<td>третья ячейка
        <tr><td>вторая ячейка<td>третья ячейка
      </table>
  <tr>
    <td>вторая ячейка
    <td>третья ячейка
</table>
вторая ячейкатретья ячейка
вторая ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка 
<style>
.demotable {
  border-collapse: collapse;
  counter-reset: schetchik;
}
.demotable tr {
  counter-increment: schetchik;
}
.demotable td,
.demotable tr:before {
  padding: .1em .5em;
  border: 1px solid #E7D5C0;
}
.demotable tr:before {
  content: counter(schetchik);
  display: table-cell;
  vertical-align: middle;
  color: #978777;
}
.demotable table {
  border-collapse: collapse;
  counter-reset: schetchikVlozh;
}
.demotable table tr {
  counter-increment: schetchikVlozh;
}
.demotable table tr:before {
  content: counter(schetchik) "." counter(schetchikVlozh);
}
</style>

<table class="demotable">
  <tr>
    <td>вторая ячейка
    <td>третья ячейка
  <tr>
    <td>вторая ячейка
    <td>
      <table class="demotable">
        <tr><td>вторая ячейка<td>третья ячейка
        <tr><td>вторая ячейка<td>третья ячейка
        <tr><td>вторая ячейка<td>третья ячейка
      </table>
  <tr>
    <td>вторая ячейка
    <td>третья ячейка
</table>

Как вывести итоговое количество строк таблицы

Начальное значение счётчика:
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
Всего (итоговое значение счётчика): 
<style>
.demotable {
  border-collapse: collapse;
  counter-reset: schetchik;
}
.demotable tbody tr {
  counter-increment: schetchik;  /* сосчитать только tr в tbody */ 
}
.demotable td,
.demotable tbody tr:before {
  padding: .1em .5em;
  border: 1px solid #E7D5C0;
}
.demotable tbody tr:before {
  display: table-cell;
  vertical-align: middle;
}
.demotable tbody tr:before,
.demotable b:after {
  content: counter(schetchik);
  color: #978777;
}
</style>

<table class="demotable">
  <thead>
    <tr><td colspan="3">Начальное значение счётчика: <b></b>
  <tbody>
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
  <tfoot>
    <tr><td colspan="3">Всего (итоговое значение счётчика): <b></b>
</table>

Как изменить начальное значение счётчика

Начальное значение счётчика:
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
Всего (итоговое значение счётчика): 
<style>
.demotable {
  border-collapse: collapse;
  counter-reset: schetchik 7;
}
.demotable tbody tr {
  counter-increment: schetchik;
}
.demotable td,
.demotable tbody tr:before {
  padding: .1em .5em;
  border: 1px solid #E7D5C0;
}
.demotable tbody tr:before {
  display: table-cell;
  vertical-align: middle;
}
.demotable tbody tr:before,
.demotable b:after {
  content: counter(schetchik);
  color: #978777;
}
</style>

<table class="demotable">
  <thead>
    <tr><td colspan="3">Начальное значение счётчика: <b></b>
  <tbody>
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
  <tfoot>
    <tr><td colspan="3">Всего (итоговое значение счётчика): <b></b>
</table>

Подсчёт в обратном порядке

Начальное значение счётчика:
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
Всего (итоговое значение счётчика): 
<style>
.demotable {
  border-collapse: collapse;
  counter-reset: schetchik 7;  /* нужно знать общее количество */ 
}
.demotable tbody tr {
  counter-increment: schetchik -1;
}
.demotable td,
.demotable tbody tr:before {
  padding: .1em .5em;
  border: 1px solid #E7D5C0;
}
.demotable tbody tr:before {
  display: table-cell;
  vertical-align: middle;
}
.demotable tbody tr:before,
.demotable b:after {
  content: counter(schetchik);
  color: #978777;
}
</style>

<table class="demotable">
  <thead>
    <tr><td colspan="3">Начальное значение счётчика: <b></b>
  <tbody>
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
  <tfoot>
    <tr><td colspan="3">Всего (итоговое значение счётчика): <b></b>
</table>

С помощью флексбокса можно изменить порядок отображения строк: снизу вверх

Начальное значение счётчика:
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
Всего (итоговое значение счётчика): 
<style>
.demotable {
  border-collapse: collapse;
  counter-reset: schetchik;
}
.demotable tbody {
  display: flex;
  flex-flow: column-reverse nowrap;
}
.demotable tbody tr {
  display: flex;
  flex: 1;
  counter-increment: schetchik;
}
.demotable tbody td {
  flex: 1;
}
.demotable td,
.demotable tbody tr:before {
  padding: .1em .5em;
  border: 1px solid #E7D5C0;
}
.demotable tbody tr:before,
.demotable b:after {
  content: counter(schetchik);
  color: #978777;
}
</style>

<table class="demotable">
  <thead>
    <tr><td colspan="3">Начальное значение счётчика: <b></b>
  <tbody>
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
  <tfoot>
    <tr><td colspan="3">Всего (итоговое значение счётчика): <b></b>
</table>

Как увеличивать счётчик по две и более единиц

Начальное значение счётчика:
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
Всего (итоговое значение счётчика): 
<style>
.demotable {
  border-collapse: collapse;
  counter-reset: schetchik;
}
.demotable tbody tr {
  counter-increment: schetchik 2;
}
.demotable td,
.demotable tbody tr:before {
  padding: .1em .5em;
  border: 1px solid #E7D5C0;
}
.demotable tbody tr:before {
  display: table-cell;
  vertical-align: middle;
}
.demotable tbody tr:before,
.demotable b:after {
  content: counter(schetchik);
  color: #978777;
}
</style>

<table class="demotable">
  <thead>
    <tr><td colspan="3">Начальное значение счётчика: <b></b>
  <tbody>
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
  <tfoot>
    <tr><td colspan="3">Всего (итоговое значение счётчика): <b></b>
</table>
Начальное значение счётчика:
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
Всего (итоговое значение счётчика): 
<style>
.demotable {
  border-collapse: collapse;
  counter-reset: schetchik;
}
.demotable tbody tr {
  counter-increment: schetchik 1;
}
.demotable tbody tr.raz2 {
  counter-increment: schetchik 7;
}
.demotable td,
.demotable tbody tr:before {
  padding: .1em .5em;
  border: 1px solid #E7D5C0;
}
.demotable tbody tr:before {
  display: table-cell;
  vertical-align: middle;
}
.demotable tbody tr:before,
.demotable b:after {
  content: counter(schetchik);
  color: #978777;
}
</style>

<table class="demotable">
  <thead>
    <tr><td colspan="3">Начальное значение счётчика: <b></b>
  <tbody>
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr class="raz2"><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
  <tfoot>
    <tr><td colspan="3">Всего (итоговое значение счётчика): <b></b>
</table>

Начинать подсчёт со второй и более строки

Начальное значение счётчика:
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
Всего (итоговое значение счётчика): 
<style>
.demotable {
  border-collapse: collapse;
  counter-reset: schetchik;
}
.demotable tbody tr:nth-child(n+2) {
  counter-increment: schetchik;
}
.demotable td,
.demotable tbody tr:before {
  padding: .1em .5em;
  border: 1px solid #E7D5C0;
}
.demotable tbody tr:before {
  display: table-cell;
  vertical-align: middle;
}
.demotable tbody tr:before,
.demotable b:after {
  content: counter(schetchik);
  color: #978777;
}
.demotable tbody tr:nth-child(-n+1):before {
  content: "";
}
</style>

<table class="demotable">
  <thead>
    <tr><td colspan="3">Начальное значение счётчика: <b></b>
  <tbody>
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
  <tfoot>
    <tr><td colspan="3">Всего (итоговое значение счётчика): <b></b>
</table>

Как разнообразить написание (обозначение) порядкового номера

См. значения свойства list-style

Начальное значение счётчика:
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
вторая ячейкатретья ячейка
Всего (итоговое значение счётчика): 
<style>
.demotable {
  border-collapse: collapse;
  counter-reset: schetchik;
}
.demotable tbody tr {
  counter-increment: schetchik;
}
.demotable td,
.demotable tbody tr:before {
  padding: .1em .5em;
  border: 1px solid #E7D5C0;
}
.demotable b:after {
  content: counter(schetchik);
  color: #978777;
}
.demotable tbody tr:before {
  content: counter(schetchik, upper-roman);
  display: table-cell;
  vertical-align: middle;
  color: #978777;
}
</style>

<table class="demotable">
  <thead>
    <tr><td colspan="3">Начальное значение счётчика: <b></b>
  <tbody>
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
    <tr><td>вторая ячейка<td>третья ячейка
  <tfoot>
    <tr><td colspan="3">Всего (итоговое значение счётчика): <b></b>
</table>
в f t
наверх ↑

9 комментариев:

Анонимный
Это прекрасно! Большое спасибо, Вам!
Космо Мизраил Горыныч
Очень мило :3 жаль, что лишние теги надо создавать х) *мечты-мечты*
NMitra
Отчего же? Поправила статью.
Анонимный
Отличная статья!

Подскажите пожалуйста у меня в таблице есть свойство:
.post_content table tr:hover td{background: #F8F8F8;} - при наведение на строку - она меняет цвет.
После добавления нумерации(Ваш код), на эту колонку, это правило не распространяется.
Изменение строки на:
.post_content .demotable table tr:hover td{background: #F8F8F8;} - тоже не помогло.

Подскажите пожалуйста как это можно исправить? Спасибо!
NMitra
.post_content table tr:hover:before {background: #F8F8F8;}
Unknown
а как сделать, чтоб в таблице, которая на разных страницах, нумерация не начиналась сначала, а продолжалась?
При этом игнорировать первую строчку этой таблицы на каждой страницы...

Заранее благодарю!
NMitra
Первый: сохранить в localStorage ( http://shpargalkablog.ru/2013/06/localStorage.html ) последнее значение на странице 1 и вынуть его на странице 2 вместо знака вопроса

counter-reset: schetchik ?;

Если известно количество пунктов, которые поместятся на странице 1. Например, при полной заполненности таблицы будет не больше/меньше 20 пунктов, то тогда можно без JS

counter-reset: schetchik 20;

Второй: дополнила статью примером http://shpargalkablog.ru/2015/10/numbering-table.html#two
Natali
Здравствуйте, а обратную нумерацию можно сделать? Т.е. не 1 2 3 4 5 а наоборот 5 4 3 2 1
NMitra
Здравствуйте. Интересный вопрос, дополнила статью http://shpargalkablog.ru/2015/10/numbering-table.html#counter-reverse-order