Как стилизовать таблицу с чередующимися полосами строк с помощью CSS

Класс, который стилизует таблицу с полосами по строкам, широко известен как стиль «чередующихся строк» ​​или «чередующихся строк». Это улучшает читаемость таблиц, придавая им визуально привлекательный вид. В CSS этого эффекта можно добиться, применив следующие стили классов:

  1. Метод 1. Использование CSS-селектора nth-child:

    table.striped-table tr:nth-child(even) {
    background-color: #f2f2f2;
    }
  2. Метод 2. Использование CSS-селектора n-го типа:

    table.striped-table tr:nth-of-type(even) {
    background-color: #f2f2f2;
    }
  3. Метод 3. Использование класса CSS:

    table.striped-table tr.striped-row {
    background-color: #f2f2f2;
    }

В методе 1 и 2 селекторы CSS tr:nth-child(even)и tr:nth-of-type(even)нацелены на каждую четную строку стол и примените цвет фона, чтобы создать эффект полос. В методе 3 вы можете вручную добавить класс «striped-row» к каждой строке, которую хотите стилизовать.