从 primefaces 中的一列中删除边框的问题 table

Question

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

它是 "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。至少 2 年以来，我不必真正深入研究 CSS，所以请放轻松。这是工作演示的 link：

[已被 OP 删除]

Answer 1

您目前正在使用 descendant/child 选择器，但需要使用多个 CSS 选择器，因为您的目标是具有 class [=15] 的 td 元素=]

td.noCellBorder{
  border: none !important;
}

同时尽量避免 !important 并增加 CSS 特异性，所以你的代码应该是。

td.ui-panelgrid-cell.noCellBorder {
  border: none;
}

Updated JSfiddle

修改后的代码：

.ui-panelgrid .ui-panelgrid-cell {
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  padding: 4px 10px;
}
td.ui-panelgrid-cell.noCellBorder {
  border: none;
}

<table id="formNC3Form:j_id_10_1_4" class="ui-panelgrid ui-widget" role="grid">
  <thead class="ui-panelgrid-header">
    <tr class="ui-widget-header" role="row">
      <td role="columnheader" class="ui-panelgrid-cell ui-widget-header">Month</td>
      <td role="columnheader" class="ui-panelgrid-cell ui-widget-header">Amount</td>
    </tr>
  </thead>
  <tbody>
    <tr class="ui-widget-content ui-panelgrid-even" role="row">
      <td role="gridcell" class="ui-panelgrid-cell">
        <label class="rightLabelPadding" for="formNC3Form:formNC3Line1">1. January</label>
      </td>
      <td role="gridcell" class="ui-panelgrid-cell">
        <input id="formNC3Form:formNC3Line1" name="formNC3Form:formNC3Line1" type="text" value="" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" />
      </td>
      <td role="gridcell" class="ui-panelgrid-cell noCellBorder"></td>
    </tr>
</table>

Answer 2

header 的其他 classes 和行也给出了边框，所以你必须像这样摆脱它们（给你的 panelGrid class 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;
}

但是给其他单元格加了黑边，不知道大家喜不喜欢

从 primefaces 中的一列中删除边框的问题 table

Issue removing border from one column in primefaces table

html

css

jsf

primefaces