title: h:dataTable alternating rows in JSF2
body: <p>I'm trying to make alternating rows in JSF2 h:dataTable (no richfaces or such) but i get an unexpected result. the table is built but it has a white grid shown (but i didn't specifiy any border) and there's no buttom line under each row.</p>
  
  <p>The CSS:</p>
  
  <pre><code>.order-table{   
   border-collapse:collapse;
  }
  
  .order-table-header{
   text-align:center;
   background:none repeat scroll 0 0 #E5E5E5;
   border-bottom:1px solid #95bce2;
   padding:16px;
  }
  
  .order-table-odd-row{
   text-align:center;
   background:none repeat scroll 0 0 #FFFFFFF;
   border-top:1px solid #000000;
  }
  
  .order-table-even-row{
   text-align:center;
   background:none repeat scroll 0 0 #ecf6fc;
   border-top:1px solid #BBBBBB;
  }
  
  table.order-table tr.over {
   background-color: #bcd4ec;
  }
  </code></pre>
  
  <p>The table:</p>
  
  <pre><code>&lt;h:dataTable id="personsTable" value="#{personController.allPersons}" var="bean" 
     styleClass="order-table" headerClass="order-table-header"
                      rowClasses="order-table-odd-row,order-table-even-row"&gt;
     &lt;h:column&gt;
      &lt;f:facet name="header"&gt;
       &lt;h:outputText value="First Name" /&gt;
      &lt;/f:facet&gt;
      &lt;h:outputText value="#{bean.firstName}"/&gt;
     &lt;/h:column&gt;
     &lt;h:column&gt;
      &lt;f:facet name="header"&gt;
       &lt;h:outputText value="Last Name" /&gt;
      &lt;/f:facet&gt;
      &lt;h:outputText value="#{bean.lastName}"/&gt;
     &lt;/h:column&gt;
     &lt;h:column&gt;
      &lt;f:facet name="header"&gt;
       &lt;h:outputText value="Phone" /&gt;
      &lt;/f:facet&gt;
      &lt;h:outputText value="#{bean.phone}"/&gt;
     &lt;/h:column&gt;
    &lt;/h:dataTable&gt;
  </code></pre>
  
  <p>and a small JQuery script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     $(document).ready(function(){
      $(".order-table tr").mouseover(function(){
       $(this).addClass("over");
      });
      $(".order-table tr").mouseout(function(){
       $(this).removeClass("over");
      });
     });
    &lt;/script&gt;
  </code></pre>
  
  <p>The result is (notice the white grid that came from i don't know where. And also no underline which should come from the CSS):</p>
  
  <p><a href="http://imagebin.org/132574" rel="nofollow">http://imagebin.org/132574</a></p>