将CSS应用于特定的p:dataTable组件，而不是所有p:dataTable组件

Question

请求表单上有多个数据表。我想移除除一个外所有数据表的边框。我已经使用以下样式来移除边框。 请问如何仅为一个数据表添加边框？目前该样式将移除所有数据表的边框。

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

- Real Chembil

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？

- BalusC

---

非常有帮助！但在我的情况下，它对列标题不起作用。它们仍然有边框。 - Turbokiwi

@Turbokiwi：问题不是如何从数据表中删除所有边框，而是问题是如何将给定的CSS应用于特定数据表，而不是所有数据表。 - BalusC

@BalusC，这对我不起作用。 所有边框仍然出现。 我正在使用Primefaces 3.5。 - John Alexander Betts

@JohnB：问题不是如何从数据表中删除所有边框，而是如何将给定的CSS应用于特定的数据表，而不是所有数据表。我已经相应地更新了问题标题。 - BalusC

@BalusC，我在这里发布了一个问题链接，你能帮我吗？ - John Alexander Betts