title: Primefaces: DataTable outside border
body: <p>I have a  PrimeFaces dataTable inside of a panel. But it has a disturbing outside border i've wanted to delete it but failed. Here are xhtml codes:</p>
  
  <pre><code> &lt;p:panel styleClass="centerPanel" id="centerPanel"&gt;
         &lt;p:dataTable styleClass="DataTable" style="width:100%;" liveScroll="true" value="#{PanelController.panelList}" var="GridPanel" scrollable="true" scrollRows="20" scrollHeight="470" rows="5"&gt;
                 &lt;p:column&gt;
  
                 &lt;/p:column&gt;
         &lt;/p:dataTable&gt;
     &lt;/p:panel&gt;
  </code></pre>
  
  <p>And here are the css codes:</p>
  
  <pre><code>.ui-datatable.DataTable th, .ui-datatable.DataTable tr, .ui-datatable.DataTable td, .ui-datatable.DataTable {
  background: rgba(220, 220, 220, 0.50) none;
  border: none; !important;
  border-color: rgba(0,0,0,0); !important;
  -webkit-background-clip:border;!important;
  color:rgba(0,0,0,0);
  }
  
  .DataTable.ui-datatable table thead {
      display: none;
      border: none; !important;
  }
  </code></pre>
  
  <p>and it seems <img src="https://i.stack.imgur.com/kdVcf.png" alt="like"></p>