Görünümde "tek" "çift" görüntülemeden etkin yönetici içindeki satır renklerini nasıl değiştiririm?

Question

Bazı nedenlerden dolayı 'garip', 'hatta' kandırdım. Ayrıca, tablonun üst kısmındaki görünüm sayfasındaki metni de görüntüler. Böylece, tabloda kaç satır bulunduğuna göre "tek" "bile" gösterecektir. Sayfamı karıştırıyor.

panel 'Cities' do 
     table do 
      tbody do 
      f.collection_check_boxes(:city_ids, City.select('id, name, state').order(:name), :id, :name_and_state) do |city| 
       tr(class: cycle('odd', 'even')) do 
       td(class: 'col col-checkbox') { city.check_box } + 
       td(class: 'col col-text') do 
        city.label do 
        city.text 
        end 

İşte bir resim örneği https://cloud.githubusercontent.com/assets/13935816/14294144/32040c28-fb35-11e5-9e97-ac3292b9ca86.png

Answer 1

bu örneği bakın bu.

tr:nth-child(even) {background: #CCC} 
 
tr:nth-child(odd) {background: #FFF} 
 
table{ 
 
    border-spacing:0; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <th>Month 
 

 
     </th><th>'94 
 

 
     </th><th>'95 
 

 
     </th><th>'96 
 

 
     </th><th>'97 
 

 
     </th><th>'98 
 

 
     </th><th>'99 
 

 
     </th><th>'00 
 

 
     </th><th>'01 
 

 
     </th><th>'02 
 

 
    </th></tr><tr> 
 
     <td>Jan 
 

 
     </td><td>14 
 

 
     </td><td>13 
 

 
     </td><td>14 
 

 
     </td><td>13 
 

 
     </td><td>14 
 

 
     </td><td>11 
 

 
     </td><td>11 
 

 
     </td><td>11 
 

 
     </td><td>11 
 

 
    </td></tr><tr> 
 
     <td>Feb 
 

 
     </td><td>13 
 

 
     </td><td>15 
 

 
     </td><td>12 
 

 
     </td><td>15 
 

 
     </td><td>15 
 

 
     </td><td>12 
 

 
     </td><td>14 
 

 
     </td><td>13 
 

 
     </td><td>13 
 

 
    </td></tr><tr> 
 
     <td>Mar 
 

 
     </td><td>16 
 

 
     </td><td>15 
 

 
     </td><td>14 
 

 
     </td><td>17 
 

 
     </td><td>16 
 

 
     </td><td>15 
 

 
     </td><td>14 
 

 
     </td><td>15 
 

 
     </td><td>15 
 

 
    </td></tr><tr> 
 
     <td>Apr 
 

 
     </td><td>17 
 

 
     </td><td>16 
 

 
     </td><td>17 
 

 
     </td><td>17 
 

 
     </td><td>17 
 

 
     </td><td>15 
 

 
     </td><td>15 
 

 
     </td><td>16 
 

 
     </td><td>16 
 

 
    </td></tr><tr> 
 
     <td>May 
 

 
     </td><td>21 
 

 
     </td><td>20 
 

 
     </td><td>20 
 

 
     </td><td>21 
 

 
     </td><td>22 
 

 
     </td><td>20 
 

 
     </td><td>21 
 

 
     </td><td>20 
 

 
     </td><td>19 
 

 
    </td></tr><tr> 
 
     <td>Jun 
 

 
     </td><td>24 
 

 
     </td><td>23 
 

 
     </td><td>25 
 

 
     </td><td>24 
 

 
     </td><td>25 
 

 
     </td><td>23 
 

 
     </td><td>25 
 

 
     </td><td>23 
 

 
     </td><td>24 
 

 
    </td></tr><tr> 
 
     <td>Jul 
 

 
     </td><td>29 
 

 
     </td><td>28 
 

 
     </td><td>26 
 

 
     </td><td>26 
 

 
     </td><td>27 
 

 
     </td><td>26 
 

 
     </td><td>25 
 

 
     </td><td>26 
 

 
     </td><td>25 
 

 
    </td></tr><tr> 
 
     <td>Aug 
 

 
     </td><td>29 
 

 
     </td><td>28 
 

 
     </td><td>27 
 

 
     </td><td>28 
 

 
     </td><td>28 
 

 
     </td><td>27 
 

 
     </td><td>26 
 

 
     </td><td>28 
 

 
     </td><td>26 
 

 
    </td></tr><tr> 
 
     <td>Sep 
 

 
     </td><td>24 
 

 
     </td><td>23 
 

 
     </td><td>23 
 

 
     </td><td>26 
 

 
     </td><td>24 
 

 
     </td><td>24 
 

 
     </td><td>24 
 

 
     </td><td>22 
 

 
     </td><td>21 
 

 
    </td></tr><tr> 
 
     <td>Oct 
 

 
     </td><td>20 
 

 
     </td><td>22 
 

 
     </td><td>20 
 

 
     </td><td>22 
 

 
     </td><td>20 
 

 
     </td><td>19 
 

 
     </td><td>20 
 

 
     </td><td>22 
 

 
     </td><td> 
 

 
    </td></tr><tr> 
 
     <td>Nov 
 

 
     </td><td>18 
 

 
     </td><td>17 
 

 
     </td><td>16 
 

 
     </td><td>17 
 

 
     </td><td>16 
 

 
     </td><td>15 
 

 
     </td><td>14 
 

 
     </td><td>15 
 

 
     </td><td> 
 

 
    </td></tr><tr> 
 
     <td>Dec 
 

 
     </td><td>15 
 

 
     </td><td>13 
 

 
     </td><td>13 
 

 
     </td><td>14 
 

 
     </td><td>13 
 

 
     </td><td>10 
 

 
     </td><td>13 
 

 
     </td><td>11 
 

 
     </td><td> 
 
    </td></tr></tbody></table>