Взаємодія

Як відобразити різні кольори в таблиці за допомогою CSS для парних непарних рядків?

2024 Від admin

Щоб установити альтернативні кольори рядка таблиці за допомогою CSS, використовуйте псевдоклас :nth-child() для націлювання на парні та непарні рядки. Застосовуйте стилі кольору фону до кожного рядка відповідно, забезпечуючи читабельність і покращуючи візуальне представлення табличних даних.23 травня 2024 р.

У цьому прикладі :nth-child(непарний) селектор націлює всі рядки з непарними номерами, тоді як селектор :nth-child(even) націлює всі рядки з парними номерами. Застосовуючи різні кольори фону до цих селекторів, ми можемо візуально розрізняти альтернативні рядки в таблиці.

The CSS :n-й-тип Псевдоклас використовується для вибору кожного непарного рядка та встановлення кольору фону цих рядків на трохи темніший тон, створюючи так званий ефект «зебри».

Ось як:

  1. Виберіть діапазон комірок, які потрібно відформатувати.
  2. Перейдіть до Головна > Форматувати як таблицю.
  3. Виберіть стиль таблиці з альтернативним затіненням рядків.
  4. Щоб змінити затінення з рядків на стовпці, виберіть таблицю в розділі «Дизайн таблиці», а потім зніміть прапорець «Рядки зі смугами» та встановіть прапорець «Стовпці зі смугами».

У вашому HTML-перегляді прямо під оголошенням "контенту":

  1. <style type="text/css">
  2. table.alternate tr:nth-child(odd) {
  3. колір фону: #888888;
  4. }
  5. table.alternate tr:nth-child(even) {
  6. колір фону: #BBBBBB;
  7. } </style>
  8. і тоді альтернативний клас можна просто застосувати до будь-якої таблиці, наприклад:

Селектор:nth-child() у CSS використовується для зіставлення елементів на основі їхньої позиції в групі братів і сестер. Він відповідає кожному елементу, який є n-им дочірнім елементом. Псевдоклас: even і odd використовується зі списком елементів, таких як абзац, пункти статті, які в основному є вмістом списку.

Використання n-го дочірнього селектора Селектор n-го дочірнього елемента — це потужний інструмент CSS, який дозволяє нам стилізувати елементи на основі їхньої позиції в групі.Приклад: у цьому прикладі ми побачимо реалізацію стилізації парних і непарних елементів за допомогою селектора n-го дочірнього елемента.