title: How to remove border-collapse from p:dataTable?
body: <p>I want to remove <code>border-collapse</code> from <code>&lt;p:dataTable&gt;</code>. I tried several ways but no luck here is what I've tried so far:</p>
  
  <p>First:</p>
  
  <pre class="lang-css prettyprint-override"><code>.ui-datatable table {
      border-collapse: hidden !important;
  }
  </code></pre>
  
  <p>Second:</p>
  
  <pre class="lang-css prettyprint-override"><code>.ui-datatable table {
      border-collapse: none !important;
  }
  </code></pre>
  
  <p>Third:</p>
  
  <pre><code>&lt;p:dataTable value="#{JpublicCalendar.public_day_1_list}"
               var="o"
               styleClass="value"&gt;
      &lt;p:column&gt;
          &lt;h:graphicImage value="PrivateDisplayImage?id=#{o.id}"
                          width="126"
                          height="64"&gt;
          &lt;/h:graphicImage&gt;
      &lt;/p:column&gt;
  &lt;/p:dataTable&gt;
  </code></pre>
  
  <p>CSS for it:</p>
  
  <pre class="lang-css prettyprint-override"><code>.value {
      border: none !important;
      border-collapse: none !important;
  }
  </code></pre>