css - Primefaces：边界外的数据表

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