删除所有面板栅格而不是数据表上的所有边框 [英] Remove all border on all panelgrids not on datatables

问题描述

我需要使用引号隐藏所有panelGrid的所有边框。下面的代码删除了所有panelGrids和dataTables上的边框（primefaces 5 +）：

I need to hide all borders of all panelGrids using primefaces. The following code remove the borders on all panelGrids and dataTables too (primefaces 5+):

.ui-panelgrid tr, .ui-panelgrid td {
    border: none;
}

我需要这个效果只在panelGrid。之后，我需要知道如何显示边框只在一些panelGrid

I need this effect only in panelGrids. After that and I need to know how to show the borders only in some panelGrids

推荐答案

您的CSS选择器是宽。它们影响作为后代的全部 < tr> 和< td> a .ui-panelgrid ，包括在 panelgrid单元格中的表中的所有内容，作为创建数据表的表的后代。所以你必须使你的选择器更具体（阅读关于mozdev的css特异性），并让他们只定位一定水平。

Your CSS selectors are to 'broad'. They influence all <tr> and <td> tags that are descendants of a .ui-panelgrid, including all that are in a table that is in a panelgrid cell as descendants of the table that makes the datatable. So you have to make your selectors more specific (read about css specificity on mozdev) and have them only target a certain level .

使用例如

.ui-panelgrid > * > tr, .ui-panelgrid > * > tr > td.ui-panelgrid-cell {
     border: none;
}

这仅定位< tr> 是 .ui-panelgrid 及其直接< td> 的子孙。

This only targets <tr>'s that are a grandchild of a .ui-panelgrid and its direct <td> children.

如果您不希望将此应用于所有 panelgrids，则必须使用上面注释中引用的styleClass @BhavinPanchani。但是，不是通过使用类显式地添加边框，而是防止应用上面的css。

If you don't want this applied to all panelgrids, You'll have to use the styleClass referred to in a comment above by @BhavinPanchani. But instead of explicitly adding borders by using a class, you prevent the css above to be applied.

.ui-panelgrid:not(.keepBorder) > * > tr, .ui-panelgrid:not(.keepBorder) > * > tr > td.ui-panelgrid-cell {
     border: none;
}

只需添加 keepBorder class to the panelGrids you want to keep the border。我没有测试这最后一件事，但用一点测试你;

Just add the keepBorder class to the panelGrids that you want to keep the border. I did not test this last thing, but with a little testing you;

另请参见

• 
  

这篇关于删除所有面板栅格而不是数据表上的所有边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！