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

【问题标题】：Apply CSS on a specific p:dataTable component instead of on all p:dataTable components将 CSS 应用于特定的 p:dataTable 组件而不是所有 p:dataTable 组件
【发布时间】：2013-03-16 15:42:18
【问题描述】：

我在申请表上有多个数据表。我想删除除一个之外的所有数据表的边框。我使用下面的样式来删除边框。能否请您告诉我如何才能只获得一个带边框的数据表。截至目前，它删除了所有数据表的边框。

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

【问题讨论】：

标签： css jsf primefaces datatable

【解决方案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；默认情况下它还有一个边框，您的初始选择器仅删除列之间的垂直边框，而不是行之间的水平边框）

另见：

How do I override default PrimeFaces CSS with custom styles?

【讨论】：

非常有帮助！但就我而言，它不适用于列标题。他们仍然有边界。
@Turbokiwi：问题不是如何从数据表中删除 all 边框，而是如何将给定的 CSS 应用于特定数据表而不是所有数据表。
@BalusC 这对我不起作用。所有边界仍然出现。我正在使用 primefaces 3.5
@JohnB：问题不是如何从数据表中删除 all 边框，而是如何将给定的 CSS 应用于特定数据表而不是所有数据表。我已经相应地更新了问题标题。
@BalusC 我发布了一个关于 here 的问题，你能帮帮我吗？