html - 从 primefaces 表中的一列中删除边框的问题

Question

自从我决定开始使用 prime-faces 库以来，我开始意识到我在 CSS 方面的表现有多么糟糕。我有一个 3 列表，我想将其中的第三列用作可选错误字段。我不希望该字段显示为表的一部分，即使出现错误也是如此。然而，在网上搜索并找到一些解决方案后，我仍然无法覆盖边框样式。这是我的标记示例。

它的“noCellBorder”列我不想有任何类型的样式或边框:

<p:panelGrid>

  <f:facet name="header">
    <p:row>
      <p:column>Month</p:column>
      <p:column>Amount</p:column>
    </p:row>
  </f:facet>

  <p:row>
    <p:column>
      <h:outputLabel class="rightLabelPadding" for="formLine1">
        <h:outputText value="#{labels.formLine1}" escape="false" />
      </h:outputLabel>
    </p:column>
    <p:column>
      <p:inputText id="formLine1" value="#{managedBean.formBean.line1}" />
    </p:column>
    <p:column styleClass="noCellBorder">
      <h:message class="fieldErrorMessage" for="formLine1" />
    </p:column>
  </p:row>

CSS

.noCellBorder > td {
  border: none !important;
}

编辑//

好吧，并非一切都是彻底的损失，我想我已经学会了如何使用 JSFiddle。至少两年来我没有真正深入研究过 CSS，所以请放轻松。这是工作演示的链接:

[已被OP删除]

Answer 1

标题和行的其他类也给出了边框，所以你必须像这样摆脱它们(给你的 panelGrid 类 noBroder 像这样 <p:panelGrid styleClass="noBorder"> )

.noCellBorder, table.noBorder thead tr.ui-widget-header, table.noBorder .ui-panelgrid-even, table.noBorder .ui-panelgrid-odd {
     border: none !important;
}

但是给其他单元格提供了黑色边框，不知道你是否喜欢。