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

Question

Можно создать что-то подобное только через стиль таблицы css? я могу создавать различные цвета для четных и нечетных строк, но я хотел бы, чтобы создать это (только цвета):

Answer 1

Если предположить, что число строк постоянно, вы можете использовать nth-of-type, nth-last-of-type или nth-child селекторов плюс формулы, чтобы сделать раскраску. Этот пример также требует играть со спецификой селектора, размещая наборы правил в определенном порядке: http://jsfiddle.net/se4Lwt1y/.

HTML:

<table> 
    <tr><td>Row 1</td></tr> 
    <tr><td>Row 2</td></tr> 
    <tr><td>Row 3</td></tr> 
    <tr><td>Row 4</td></tr> 
    <tr><td>Row 5</td></tr> 
    <tr><td>Row 6</td></tr> 
    <tr><td>Row 7</td></tr> 
    <tr><td>Row 8</td></tr> 
    <tr><td>Row 9</td></tr> 
    <tr><td>Row 10</td></tr> 
    <tr><td>Row 11</td></tr> 
    <tr><td>Row 12</td></tr> 
    <tr><td>Row 13</td></tr> 
    <tr><td>Row 14</td></tr> 
    <tr><td>Row 15</td></tr> 
    <tr><td>Row 16</td></tr> 
    <tr><td>Row 17</td></tr> 
    <tr><td>Row 18</td></tr> 
    <tr><td>Row 19</td></tr> 
    <tr><td>Row 20</td></tr> 
    <tr><td>Row 21</td></tr> 
</table> 

CSS:

table { 
    width: 100%; 
} 

table tr:nth-of-type(-n + 11) { 
    background-color: hsla(60, 70%, 70%, 1); 
} 

table tr:nth-of-type(-n + 3) { 
    background-color: hsla(0, 0%, 70%, 1); 
} 

table tr:nth-last-of-type(-n + 11) { 
    background-color: hsla(200, 50%, 70%, 1); 
} 

table tr:nth-last-of-type(-n + 4) { 
    background-color: hsla(200, 50%, 60%, 1); 
}