Используйте nth-child для повторяющегося диапазона строк таблицы

У меня есть таблица, скажем, 20 строк. Я знаю, что я могу использовать nth-child css для изменения фона строк, но я не знаю, как изменить фон для повторяющегося диапазона строк. Например, я хочу, чтобы строка 1-3 была зеленой, 4-6 белых, 7-9 зеленых и т. Д. Я попытался связать n-й ребенок, но я не могу придумать правильные результаты. Это напоминает таблицу У меня есть:Используйте nth-child для повторяющегося диапазона строк таблицы

<table border=1> 
<tr> 
    <td width='30px' rowspan='3'>1</td> 
    <td width='150px'>1</td> 
    <td width='150px'>1</td> 
</tr> 
<tr> 
    <td width='150px'>2</td> 
    <td width='150px'>2</td> 
</tr> 
<tr class='trContacts'> 
    <td colspan='3'>3</td> 
</tr> 
<tr> 
    <td width='30px' rowspan='3'>4</td> 
    <td width='150px'>4</td> 
    <td width='150px'>4</td> 
</tr> 
<tr> 
    <td width='150px'>5</td> 
    <td width='150px'>5</td> 
</tr> 
<tr class='trContacts'> 
    <td colspan='3'>6</td> 
</tr> 
<tr> 
    <td width='30px' rowspan='3'>7</td> 
    <td width='150px'>7</td> 
    <td width='150px'>7</td> 
</tr> 
<tr> 
    <td width='150px'>8</td> 
    <td width='150px'>8</td> 
</tr> 
<tr class='trContacts'> 
    <td colspan='3'>9</td> 
</tr> 
<tr> 
    <td width='30px' rowspan='3'>10</td> 
    <td width='150px'>10</td> 
    <td width='150px'>10</td> 
</tr> 
<tr> 
    <td width='150px'>11</td> 
    <td width='150px'>11</td> 
</tr> 
<tr class='trContacts'> 
    <td colspan='3'>12</td> 
</tr>

любая помощь очень ценится !!!

источник

2017-02-02 derBrain

Вы можете использовать формулы в nth-child:

tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) { 
    background-color: green; 
}

Это будет выбирать каждый 6-й ребенок и два последующих из них (средства: всегда первые три из шести).

Адаптация к примеру:

tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) { 
 
\t background-color: green; 
 
}

<table border=1> 
 
<tr> 
 
    <td width='30px' rowspan='3'>1</td> 
 
    <td width='150px'>1</td> 
 
    <td width='150px'>1</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>2</td> 
 
    <td width='150px'>2</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>3</td> 
 
</tr> 
 
<tr> 
 
    <td width='30px' rowspan='3'>4</td> 
 
    <td width='150px'>4</td> 
 
    <td width='150px'>4</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>5</td> 
 
    <td width='150px'>5</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>6</td> 
 
</tr> 
 
<tr> 
 
    <td width='30px' rowspan='3'>7</td> 
 
    <td width='150px'>7</td> 
 
    <td width='150px'>7</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>8</td> 
 
    <td width='150px'>8</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>9</td> 
 
</tr> 
 
<tr> 
 
    <td width='30px' rowspan='3'>10</td> 
 
    <td width='150px'>10</td> 
 
    <td width='150px'>10</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>11</td> 
 
    <td width='150px'>11</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>12</td> 
 
</tr> 
 
</table>

источник

2017-02-02 16:51:56 Marvin

Марвин, спасибо за тонну! Очень признателен! – derBrain

tr { 
 
    background-color: red; 
 
} 
 

 
tr:nth-child(n+4) { 
 
    background-color: green; 
 
} 
 

 
tr:nth-child(n+7) { 
 
    background-color: blue; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<table border=1> 
 
<tr> 
 
    <td width='30px' rowspan='3'>1</td> 
 
    <td width='150px'>1</td> 
 
    <td width='150px'>1</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>2</td> 
 
    <td width='150px'>2</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>3</td> 
 
</tr> 
 
<tr> 
 
    <td width='30px' rowspan='3'>4</td> 
 
    <td width='150px'>4</td> 
 
    <td width='150px'>4</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>5</td> 
 
    <td width='150px'>5</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>6</td> 
 
</tr> 
 
<tr> 
 
    <td width='30px' rowspan='3'>7</td> 
 
    <td width='150px'>7</td> 
 
    <td width='150px'>7</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>8</td> 
 
    <td width='150px'>8</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>9</td> 
 
</tr> 
 
<tr> 
 
</body> 
 
</html>

источник

2017-02-02 16:50:51

Попробуйте

.table tr:nth-child(3n + 1) td:nth-child(odd) { 
 
\t background: blue; 
 
} 
 
.table tr:nth-child(3n + 1) td:nth-child(even) { 
 
\t background: green; 
 
} 
 
.table tr:nth-child(3n + 1) td:first-child { 
 
\t background: red; 
 
} 
 
.table tr:nth-child(3n + 1) + tr td:nth-child(odd) { 
 
\t background: orange; 
 
} 
 
.table tr:nth-child(3n + 1) + tr td:nth-child(even) { 
 
\t background: black; 
 
} 
 
.table tr:nth-child(3n + 1) + tr + tr td { 
 
\t background: yellow; 
 
}

<table border=1 class="table"> 
 
<tr> 
 
    <td width='30px' rowspan='3'>1</td> 
 
    <td width='150px'>1</td> 
 
    <td width='150px'>1</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>2</td> 
 
    <td width='150px'>2</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>3</td> 
 
</tr> 
 
<tr> 
 
    <td width='30px' rowspan='3'>4</td> 
 
    <td width='150px'>4</td> 
 
    <td width='150px'>4</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>5</td> 
 
    <td width='150px'>5</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>6</td> 
 
</tr> 
 
<tr> 
 
    <td width='30px' rowspan='3'>7</td> 
 
    <td width='150px'>7</td> 
 
    <td width='150px'>7</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>8</td> 
 
    <td width='150px'>8</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>9</td> 
 
</tr> 
 
<tr> 
 
    <td width='30px' rowspan='3'>10</td> 
 
    <td width='150px'>10</td> 
 
    <td width='150px'>10</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>11</td> 
 
    <td width='150px'>11</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>12</td> 
 
</tr> 
 
<tr> 
 
    <td width='30px' rowspan='3'>1</td> 
 
    <td width='150px'>1</td> 
 
    <td width='150px'>1</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>2</td> 
 
    <td width='150px'>2</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>3</td> 
 
</tr> 
 
<tr> 
 
    <td width='30px' rowspan='3'>4</td> 
 
    <td width='150px'>4</td> 
 
    <td width='150px'>4</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>5</td> 
 
    <td width='150px'>5</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>6</td> 
 
</tr> 
 
<tr> 
 
    <td width='30px' rowspan='3'>7</td> 
 
    <td width='150px'>7</td> 
 
    <td width='150px'>7</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>8</td> 
 
    <td width='150px'>8</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>9</td> 
 
</tr> 
 
<tr> 
 
    <td width='30px' rowspan='3'>10</td> 
 
    <td width='150px'>10</td> 
 
    <td width='150px'>10</td> 
 
</tr> 
 
<tr> 
 
    <td width='150px'>11</td> 
 
    <td width='150px'>11</td> 
 
</tr> 
 
<tr class='trContacts'> 
 
    <td colspan='3'>12</td> 
 
</tr> 
 
</table>

источник

2017-02-02 17:04:10 grinmax

Используйте nth-child для повторяющегося диапазона строк таблицы

ответ

Смежные вопросы