从 primefaces 表中的一列中删除边框的问题答案

【问题标题】：Issue removing border from one column in primefaces table从 primefaces 表中的一列中删除边框的问题
【发布时间】：2015-09-15 17:18:42
【问题描述】：

既然我决定开始使用 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。至少在 2 年内，我不必真正深入研究 CSS，所以请放轻松。这是一个工作演示的链接：

[已被 OP 删除]

【问题讨论】：

使用 static/generated HTML 和 CSS 创建一个演示。
我不明白你说的演示是什么意思
我的意思是您需要使用 SO sn-p 向我们展示问题或使用 jsfiddle.net
我仍然不清楚如何做到这一点。这是使用 PrimeFaces 组件，这些组件呈现为工具包定义的 HTML 标记和自定义样式。我尝试在 JSFiddle 工具中输入我在此处提供的相同内容，不出所料，它无法呈现。
是的，这意味着您需要在 JSfiddle 中使用呈现的 HTML。

标签： html css jsf primefaces

【解决方案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;
}

但是是给其他单元格加黑边，不知道你喜不喜欢。

【讨论】：

已修复 - 仅 <p:panelGrid> 类 noBorder 受影响。

【解决方案2】：

您当前正在使用后代/子选择器，但需要使用多个 CSS 选择器，因为您的目标是 td 元素，该元素具有 .noCellBorder 类

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>

【讨论】：

必须发生其他事情，因为虽然这在我提供的示例中有效，但在我的工作代码库中还不够。让我看看我是否可以添加更多的 primefaces 样式
ive 包含了标记中提到的每一种样式，但我仍然无法使其正常工作。我已经准备好撕掉这些 primefaces 标签，然后使用普通的 JSF。这非常令人沮丧。谢谢您的帮助。我敢肯定这只是我没有提供足够信息的情况
没问题。希望您能尽快找到解决方案。