CODEWITHSUNDEEP
cssjsfjsf-2datatableprimefaces
Ömer Faruk Almalı
Ömer Faruk Almalı

Reputation: 3822

Primefaces: DataTable outside border

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:panel styleClass="centerPanel" id="centerPanel">
       <p:dataTable styleClass="DataTable" style="width:100%;" liveScroll="true" value="#{PanelController.panelList}" var="GridPanel" scrollable="true" scrollRows="20" scrollHeight="470" rows="5">
               <p:column>

               </p:column>
       </p:dataTable>
   </p:panel>

And here are the css codes:

.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;
}

and it seems like

Upvotes: 1

Views: 16442

Answers (1)

Akos K
Akos K

Reputation: 7133

use the following css style:

    .DataTable table > thead > tr > th,
    .DataTable table > tbody,
    .DataTable table > tbody > tr,
    .DataTable table > tbody > tr > td {
        border: none !important;
    }

of in case if your don't care about your filter input boxes and such elements just do

   .DataTable table * {
       border: none !important;
   }

Upvotes: 1

Related Questions