title: Why don't the border-specific attributes seems to work on rows while displaying dynamic data using h:dataTable in JSF?
body: <p>Consider:</p>
  
  <pre><code>             &lt;h:dataTable value="#{orderBean.orderList}" var="o" 
                  styleClass="order-table"
                  headerClass="order-table-header"
                  rowClasses="order-table-odd-row,order-table-even-row" &gt;
  
                  &lt;h:column&gt;
                      &lt;!-- column header --&gt;
                      &lt;f:facet name="header"&gt;Order No&lt;/f:facet&gt;
                      &lt;!-- row record --&gt;
                      #{o.orderNo}
                  &lt;/h:column&gt;
                  &lt;h:column&gt;
                      &lt;f:facet name="header"&gt;Product Name&lt;/f:facet&gt;
                      #{o.productName}
                  &lt;/h:column&gt;
  
                  &lt;h:column&gt;
                      &lt;f:facet name="header"&gt;Price&lt;/f:facet&gt;
                      #{o.price}
                  &lt;/h:column&gt;
  
                  &lt;h:column&gt;
                      &lt;f:facet name="header"&gt;Quantity&lt;/f:facet&gt;
                      #{o.qty}
                  &lt;/h:column&gt;
              &lt;/h:dataTable&gt;
  </code></pre>
  
  <p>the included css file:</p>
  
  <pre><code>.order-table{   
      border-collapse:separate;
      border: 20px solid red ;
  
  }
  
  .order-table-header{
      text-align:center;
      background:none repeat scroll 0 0 #E5E5E5;
      border:5px solid #BBBBBB; 
      padding:16px;
  }
  
  .order-table-odd-row{
      text-align:center;
  
      background:none repeat scroll 0 0 blue;
      /* border:1px solid #BBBBBB; */
      /* border-top:1px solid red; */
      outline: 5px solid black;
  }
  
  .order-table-even-row{
      text-align:center;
      background:none repeat scroll 0 0 orange;
  
      /* border-left:5px solid pink; */
  }
  </code></pre>
  
  <p>The commented out lines(if uncommented) in css file doesn't seems to have effect, while the outline attribute does show it effects. Why? Since I am new to CSS, I am ofcouse missing something. So, how will apply borders to specfic rows?</p>
  
  <p><img src="https://i.stack.imgur.com/DXsCk.jpg" alt="DataTable"></p>