如何在Primeface的列中删除PrimeFaces dataList的边框？

Posted 2021-03-30

在我的webapp中，我在Primeface的列中声明了一个Primeface的dataList，而该列又位于PF dataTable中，如下所示：

<p:dataTable id="equip_table" 
    value="#{virtualBean.listEquip}" 
    var="item" 
    paginator="true" 
    rows="100"
    rowsPerPageTemplate="100,50,10,5" >

    ...

    <p:column 
        headerText="Operador | Equipamentos reais" 
        style="padding: 5px; >
        <p:dataList 
            style="border: none;"
            value="#{item.equipReals}" 
            var="equips" >
            <h:outputText value="#{equips.operator}" />
            <h:outputText value=" | " />
            <h:outputText value="#{equips.equip.nome}" />
        </p:dataList >
    </p:column>

视觉结果如下图所示：dataList正确放入列中，但周围有不需要的边框。不仅如此，它还会在表格的网格中产生（大约）1个像素的失真：

我想删除这两个不需要的错误：显示数据周围没有边框，表中没有失真。我想象这可以通过改变上面的样式来完成，style="border: none;"，但这不起作用，只是将轮廓设置为无，将边框/轮廓颜色更改为白色等。命令导致无效。我尝试在列的style调用中进行类似的编码，但这会影响整个列的行为，这是不希望的。在SO上冲浪我发现了一些可能的解决方案涉及更复杂的.css编程，我无法适应我的情况。没有这样的解决方案，我甚至无法处理表格单元的错位。

那么如何删除此内容的边框？关于桌面错位，可以做些什么？

答案

尝试将styleClass =“noBorders”放在p：dataList上。在你的CSS文件或页面样式标签上：

.noBorders *{
border: none !important;
}

如果失真仍然存在，您可以尝试从datalist中删除填充和边距。