primefaces - Primefacesテーブルの列ヘッダーを非表示にする

Question

ap：treeTableがあり、ツリーの内容はすべて1つの列にあります。ツリーは共有コンポーネントであるため、一部のページには列ヘッダーが必要であり、一部のページには必要ありません。columnHeaderが空のページでは、列ヘッダーの空の行が作成されますが、これは不要です。列ヘッダーがない場合のヘッダーではなく、列の内容が必要です。

どうすればこれを修正できますか？どんなポインタ/アイデアも素晴らしいでしょう。ありがとう！

Answer 1

thead display属性をnoneに設定することで、カスタムCSSでこれを解決できます。

例：

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

JSFがこれに似ている場合：

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

Answer 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; 
}

Answer 3

より正式な解決策：

鬼ごっこ：

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

スタイル：

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

Answer 4

スタイルセレクターをより具体的にする必要がある場合があります。

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

これにより、フォームIDを参照する必要もなくなります。「$」はワイルドカードで始まり、「>」は直接の子のみを選択することを示します。非常に優れたCSSセレクターのリファレンスについては、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"テーブルでは機能しません。

私の場合、border：none、background：noneの提案は、テーブルの上に空のスペースを残し、テーブルの左側の境界線も非表示にします。

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