css - Primefaces:DataTable 外边框

Question

我在面板中有一个 PrimeFaces 数据表。但它有一个令人不安的外部边界我想删除它但失败了。以下是 xhtml 代码:

 <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>

这是CSS代码:

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

似乎

Answer 1

使用以下CSS样式:

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

以防万一你不关心你的过滤器输入框和这些元素

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