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

Question

请求表单上有多个数据表。我想删除所有数据表的边框，只有一个除外。我使用下面的样式来移除边框。你能告诉我怎样才能得到一个有边界的datatable吗?到目前为止，它删除了所有数据表的边框。

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

Answer 1

为所讨论的表指定一个特定的样式类:

<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;默认情况下，它也有一个边框，你的初始选择器只删除列之间的垂直边框，不删除行之间的水平边框)

参见:

• 我如何用自定义样式覆盖默认的PrimeFaces CSS ?