How to get a "zebra" table?

W

wolverine7772019-04-12 18:02:54

HTML

wolverine777, 2019-04-12 18:02:54

Hello, I'm working in symfony 4 and I need to get a table like this in twig-e - so that blue and white color alternate as the table fills.
Like this:
Any advice is greatly appreciated!
Thanks

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

E

Evgeny Romashkan, 2019-04-12
@wolverine777

And what does Symfony and Twig have to do with it?)
This is done with one CSS parameter :nth-child
See htmlbook.ru/css/nth-child

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nth-child</title>
  <style>
   table { 
    width: 100%; /* Ширина таблицы */
    border-spacing: 0; /* Расстояние между ячейками */
   }
   tr:nth-child(2n) {
    background: #f0f0f0; /* Цвет фона */
   } 
   tr:nth-child(1) {
    background: #666; /* Цвет фона */
    color: #fff; /* Цвет текста */
   } 
  </style>
 </head>
 <body>
  <table border="1">
   <tr> 
    <td>&nbsp;</td><td>2134</td><td>2135</td>
    <td>2136</td><td>2137</td><td>2138</td>
   </tr>
   <tr> 
    <td>Нефть</td><td>16</td><td>34</td>
    <td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>4</td><td>69</td>
    <td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>7</td><td>73</td>
    <td>79</td><td>34</td><td>86</td>
   </tr>
   <tr>
    <td>Камни</td><td>23</td><td>34</td>
    <td>88</td><td>53</td><td>103</td>
   </tr>
  </table> 
 </body>
</html>

E

Egor Skorokhodov, 2019-04-12
@egor_sc

simple css
https://jsfiddle.net/3u1h9wcn/1/