アクティブな管理者の行の色を、「偶数」の「偶数」を表示しないでどのように交互に切り替えるのですか？

Question

私は '奇妙な'、 '均等な'トリックを使用する何らかの理由で。私のテーブルの上のビューページにもテキストが表示されます。したがって、テーブルにある行の数に基づいて「奇数」の「均等」が表示されます。それは私のページを混乱させる。

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 

ここでは画像の例が https://cloud.githubusercontent.com/assets/13935816/14294144/32040c28-fb35-11e5-9e97-ac3292b9ca86.png

Answer 1

だが、この例を参照してください。

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>