在特定的p:dataTable组件上应用CSS,而不是在所有p:dataTable组件上应用CSS

时间:2013-03-26 17:44:57

标签: css jsf primefaces datatable

我在请求表单上有多个数据表。我想删除所有数据表的边框除了一个。我使用下面的样式删除边框。 能告诉我如何才能获得一个带边框的数据表。截至目前,它删除了所有数据表的边框。

.ui-datatable .ui-datatable-data td, .ui-datatable .ui-datatable-data-empty td {
  border-style: none;
}

1 个答案:

答案 0 :(得分:9)

为相关表格提供特定的样式类:

<p:dataTable ... styleClass="borderless">

这样你可以使用更具体的CSS选择器:

.ui-datatable.borderless .ui-datatable-data tr,
.ui-datatable.borderless .ui-datatable-data-empty tr,
.ui-datatable.borderless .ui-datatable-data td,
.ui-datatable.borderless .ui-datatable-data-empty td {
    border-style: none;
}

(请注意,我也将选择器扩展为覆盖tr;默认情况下它还有一个边框,初始选择器只删除列之间的垂直边框,而不是行之间的水平边框)

另见: