Ukryj prymitywy nagłówek kolumny tabeli

Question

Mam p: treeTable i zawartość drzewa są w jednej kolumnie. Drzewo jest współużytkowanym komponentem, więc niektóre z moich stron wymagają nagłówka kolumny, a niektóre nie. Na stronach, na których kolumna columnHeader jest pusta, tworzy pusty wiersz dla nagłówka kolumny, którego nie chcę. Chcę zawartość kolumny, a nie nagłówek, gdy nie ma nagłówka kolumny.

Jak mogę to naprawić? Wszelkie wskazówki/pomysły byłyby świetne. Dzięki!

Answer 1

Można rozwiązać to z niestandardowych CSS poprzez ustawienie atrybutu wyświetlacza THEAD niepodważalna:

Przykład:

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

jeśli JSF jest podobny do tego:

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

Answer 2

Użytkownik może musisz być bardziej konkretny przy użyciu selektora stylu:

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

Eliminuje to również konieczność odwoływania się do identyfikatora formularza. "$" Rozpoczyna się od symbolu wieloznacznego, a ">" oznacza, że ​​należy wybierać tylko bezpośrednie dzieci. Zobacz http://www.w3schools.com/cssref/css_selectors.asp, aby uzyskać naprawdę dobre odniesienie do selektora CSS.

Answer 3

Bardziej formalne rozwiązanie:

TAG:

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

Styl:

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

Answer 4

Jeśli Twój <p:dataTable> wykorzystuje kolumny szerokości jak ten

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

a ty u se następujące CSS ukryć nagłówki kolumn

.myTable thead { 
    display:none; 
} 

można również stracić szerokości kolumn ustawionych

---

rozwiązanie ukryć nagłówek kolumny i zachować kolumnę szerokości

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

Answer 5

Ukryj nagłówek (tak samo jak inne odpowiedzi):

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

... i określić szerokość kolumny:

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

To nie będzie działać z reflow = "true" tabel.

Dla mnie obramowanie: brak, tło: brak sugestii pozostawia pustą przestrzeń nad stołem i ukrywa również lewą krawędź stołu.

Answer 6

Dodaj ten kod do pliku 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; 
    } 

Następnie nazwać ten kod z pliku xhtml jak ten:

<p:dataTable styleClass="borderless">