Primefaces：边界外的数据表答案

【问题标题】：Primefaces: DataTable outside borderPrimefaces：边界外的数据表
【发布时间】：2012-10-23 08:07:14
【问题描述】：

我在面板中有一个 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;
}

看来

【问题讨论】：

您要删除表格内的所有边框（包括过滤框的边框）还是只删除环绕边框？
我只想删除所有边框，包括包装边框。而且我意识到对dataTable行禁用了更奇怪的透明背景颜色，我认为我必须使用背景图像。

标签： css jsf jsf-2 datatable primefaces

【解决方案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;
   }

【讨论】：

非常感谢！你怎么看行透明度？我的页面有一个背景图像，但 dataTable 背景颜色属性不适用于透明度。（颜色如 rgba(220,220,220,0.50)
很抱歉在选择器之前留下那个临时 id，因为你的 dataTable 有 DataTable styleClass，正确的选择器是 .DataTable。