隐藏 primefaces 表列标题答案

【问题标题】：hide primefaces table column header隐藏 primefaces 表列标题
【发布时间】：2012-09-30 07:53:03
【问题描述】：

我有一个 p:treeTable 并且树的内容都在一列中。树是一个共享组件，所以我的一些页面需要列标题，而有些则不需要。在 columnHeader 为空的页面中，它为列标题创建了一个空行，这是我不想要的。我确实想要列内容，而不是没有列标题时的标题。

我该如何解决这个问题？任何指针/想法都会很棒。谢谢！

【问题讨论】：

标签： primefaces hide treetable columnheader

【解决方案1】：

您可以通过将 thead 显示属性设置为 none 来使用自定义 CSS 解决这个问题：

例子：

div[id="testForm:first"] thead {
    display:none;
}

如果您的 JSF 与此类似：

<h:form id="testForm">
    <p:dataTable id="first">
        ...
    <p:/dataTable>
</h:form>

【讨论】：

感谢您的回答，display:none 对我有用，稍微调整一下以获得预期的行 .hide-column-header table thead tr[role='row'] {display: none;}

【解决方案2】：

如果您的 <p:dataTable> 使用这样的列宽

<p:dataTable styleClass="myTable">
   <p:column width="100">

您使用以下 CSS 隐藏列标题

.myTable thead {
    display:none;
}

你也会失去你设置的列宽

隐藏列标题并保持列宽的解决方案

.myTable thead th { 
    border: none !important; 
    background: none !important; 
}

【讨论】：

对我来说工作：.noTableHeader table thead th { border-color: transparent;背景颜色：白色；边框底部颜色：RGB（212,214,216）； /*这只是为了在桌面获得边框*/ }

【解决方案3】：

更正式的解决方案：

标签：

<p:treeTable styleClass="tree-table-no-header">

风格：

.tree-table-no-header thead {
    display: none;
}

【讨论】：

【解决方案4】：

您可能会发现您需要更具体地使用样式选择器：

 div[id$="myTableId"]>div>table>thead { display:none; }

这也消除了引用您的表单 ID 的需要。 '$' 以通配符开头，'>' 表示仅选择直接子级。请参阅 http://www.w3schools.com/cssref/css_selectors.asp 以获得非常好的 CSS 选择器参考。

【讨论】：

【解决方案5】：

隐藏标题（与其他答案相同）：

.hide-table-header thead {
    display: none;
}

...并指定列宽：

<p:dataTable styleClass="hide-table-header">
        <p:column style="width: 80px">

这些不适用于 reflow="true" 表。

对我来说，border:none, background:none 建议在表格上方留下一个空白空间，并隐藏表格的左侧边框。

【讨论】：

【解决方案6】：

将此代码添加到您的 css3 文件中

** Remove the header from the dataTable**/
.ui-datatable.borderless thead {
  display: none;
}

/** Remove the border from the dataTable **/
.ui-datatable.borderless tbody,
.ui-datatable.borderless tbody tr,
.ui-datatable.borderless tbody td {
    border-style: none;
    }

然后像这样从 xhtml 文件中调用这段代码：

<p:dataTable styleClass="borderless">

【讨论】：