ẩn tiêu đề cột của bảng tiêu đề

Question

Tôi có một p: treeTable và nội dung cây là tất cả trong một cột. Cây là một thành phần được chia sẻ nên một số trang của tôi yêu cầu tiêu đề cột và một số thì không. Trong các trang nơi columnHeader rỗng, nó tạo ra một hàng trống cho tiêu đề cột mà tôi không muốn. Tôi muốn nội dung cột, không phải là tiêu đề khi không có tiêu đề cột.

Làm cách nào để khắc phục sự cố này? Bất kỳ con trỏ/ý tưởng sẽ là tuyệt vời. Cảm ơn!

Answer 1

Bạn có thể giải quyết điều đó với tùy chỉnh CSS bằng cách thiết lập thuộc tính hiển thị thead không ai sánh kịp:

Ví dụ:

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

nếu JSF của bạn là tương tự như sau:

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

Answer 2

Bạn có thể tìm thấy bạn cần cụ thể hơn với công cụ chọn kiểu của bạn:

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

Điều này cũng giúp loại bỏ sự cần thiết phải tham khảo id biểu mẫu của bạn. '$' Là bắt đầu bằng thẻ hoang dã và '>' cho biết chỉ chọn trẻ em trực tiếp. Xem http://www.w3schools.com/cssref/css_selectors.asp để có tham chiếu CSS Selector thực sự tốt.

Answer 3

Một giải pháp chính thức hơn:

TAG:

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

Kiểu:

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

Answer 4

Nếu bạn <p:dataTable> sử dụng cột độ rộng như thế này

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

và bạn u se CSS sau đây để ẩn các tiêu đề cột

.myTable thead { 
    display:none; 
} 

bạn cũng sẽ mất độ rộng cột bạn thiết

---

Giải pháp để ẩn tiêu đề cột và giữ cột độ rộng

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

Answer 5

Ẩn tiêu đề (giống như các câu trả lời khác):

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

... và chỉ định chiều rộng cột:

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

Những điều này sẽ không làm việc với reflow = bảng "true".

Đối với tôi đường viền: không, nền: không có đề xuất nào để trống một không gian trống phía trên bảng và ẩn viền bên trái của bảng.

Answer 6

Thêm mã này vào tập tin css3 bạn

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

Sau đó gọi mã này từ file xhtml như thế này:

<p:dataTable styleClass="borderless">