Question

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

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

Answer 1

您可以通过将thead display属性设置为none来解决这个问题：

示例：

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

如果您的JSF与此类似：

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

Answer 2

更正式的解决方案：

标签：

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

风格：

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

Answer 3

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

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

并使用以下CSS隐藏列标题

.myTable thead {
    display:none;
}

您还将丢失您设置的列宽

隐藏列标题并保持列宽

的解决方案

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

Answer 4

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

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

这也消除了引用表单ID的需要。＆＃39; $＆＃39;是通过外卡和＆＃39;＆gt;＆＃39;说只选择直接的孩子。有关非常好的CSS Selector参考，请参阅http://www.w3schools.com/cssref/css_selectors.asp。

Answer 5

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

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

...并指定列宽：

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

这些不适用于reflow =“true”表。

对我来说，边框：无，背景：无建议在桌子上方留下空白区域，并隐藏桌子的左侧边框。

Answer 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">

隐藏primefaces表列标题

6 个答案: