html: разные цвета для строки и столбца таблицы

Question

Как написать код css в коде html для создания таблицы, подобной следующей:

разные цвета для альтернативного столбца и строки

Большое спасибо

Answer 1

Вы можете использовать CSS -Выбор nth-child. Этот селектор выбирает, например, второй ряд.

table tr:nth-child(2){
     background: red;
}

Чтобы иметь разные цветные столбцы, вы можете использовать следующий селектор. Это закрасит второй столбец.

tr td:nth-child(2){
    background: red;
}

Источник: здесь

Чтобы выбрать конкретную ячейку, используйте оба одновременно:

table tr:nth-child(2) td:nth-child(2){
    background: red;
}

Подробнее на этом сайте: https://www.w3schools.com/cssref/sel_nth-child.asp

Answer 2

Этот вопрос был решен путем установки сначала столбца синим и голубым, а затем с помощью CSS -селектора следующим образом:

table.tb1 tr:nth-child(10n+0),tr:nth-child(10n+1),tr:nth-child(10n+2),tr:nth-child(10n+3),tr:nth-child(10n+4){background: pink; }  

table.tb1 tr:nth-child(10n+0) td:nth-child(2n+1){background: red;} 
table.tb1 tr:nth-child(10n+1) td:nth-child(2n+1){background: red;} 
table.tb1 tr:nth-child(10n+2) td:nth-child(2n+1){background: red;} 
table.tb1 tr:nth-child(10n+3) td:nth-child(2n+1){background: red;}
table.tb1 tr:nth-child(10n+4) td:nth-child(2n+1){background: red;} 

Большое спасибо за помощь!

Answer 3

стиль будет реализован на основе td, и для красно-синих строк вы можете добавить класс к (tr) или использовать n-ный ребенок с номером на tr: tr:nth-child(6)

tr td:nth-child(even) {background:red;} tr td:nth-child(odd) {background:pink;}

Answer 4

Вам нужно будет реализовать так называемые четные и нечетные правила , такие как:

tr:nth-child(even)
tr:nth-child(odd)