hide primefacesテーブルの列ヘッダー

Question

私はp：treeTableを持ち、ツリーの内容はすべて1列にあります。ツリーは共有コンポーネントなので、私のページのいくつかは列ヘッダを必要とし、いくつかは必要としません。 columnHeaderが空のページでは、必要のない列ヘッダーの空の行が作成されます。私は列の内容がほしい、ヘッダーがないときだけヘッダーをします。

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

Answer 1

あなたがnoneにthead要素の表示属性を設定することで、カスタムCSSでいることを解決することができます。

例：

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

あなたのJSFはこれに類似している場合：

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

Answer 2

あなたが可能あなたのスタイルセレクターでより具体的になる必要があることがわかります：

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

これにより、フォームIDを参照する必要もなくなります。 '$'はワイルドカードで始まり、 '>'は直接の子供のみを選択します。本当に良いCSSセレクタリファレンスについては、http://www.w3schools.com/cssref/css_selectors.aspを参照してください。

Answer 3

よりフォーマルなソリューション：

TAG：

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

スタイル：

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

Answer 4

をご<p:dataTable>この

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

のような列幅を使用して、あなたのu場合SE以下のCSSは

.myTable thead { 
    display:none; 
} 

あなたはまた、あなたが列ヘッダを非表示にする

---

ソリューションを設定する列の幅を失い、コラムを維持するカラムヘッダー非表示

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

Answer 5

隠すヘッダーを幅に（他の回答と同じ）：

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

...と列の幅を指定：

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

をこれらは、リフロー= "true" のテーブルでは動作しません。

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

Answer 6

次に、このようなXHTMLファイルからこのコードを呼び出す

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

あなたCSS3ファイルにこのコードを追加します。

<p:dataTable styleClass="borderless">