2012-10-09 42 views
8

मेरे पास एक पी है: पेड़टेबल और पेड़ सामग्री सभी एक कॉलम में हैं। पेड़ एक साझा घटक है इसलिए मेरे कुछ पृष्ठों को कॉलम हेडर की आवश्यकता होती है और कुछ नहीं करते हैं। उन पृष्ठों में जहां कॉलम हैडर खाली है, यह कॉलम हेडर के लिए एक खाली पंक्ति बनाता है, जिसे मैं नहीं चाहता हूं। मुझे कॉलम सामग्री चाहिए, जब कोई कॉलम हेडर न हो तो हेडर नहीं।प्राइमफेस टेबल कॉलम हेडर छुपाएं

मैं इसे कैसे ठीक कर सकता हूं? कोई संकेतक/विचार बहुत अच्छा होगा। धन्यवाद!

उत्तर

13

आप किसी से thead प्रदर्शन विशेषता सेट करके कस्टम सीएसएस के साथ हल कर सकते हैं कि:

उदाहरण:

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

अगर आपके JSF इस के समान है:

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

का जवाब दे, प्रदर्शन के लिए धन्यवाद: कोई नहीं मेरे लिए काम किया, थोड़ा फेरबदल इच्छित पंक्ति प्राप्त करें। हाइड-कॉलम-हेडर टेबल thead tr [role = 'row'] {display: none;} – santa029

1

आप कर सकते हैं आपको अपने स्टाइल चयनकर्ता के साथ अधिक विशिष्ट होने की आवश्यकता है:

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

यह आपके फॉर्म आईडी को संदर्भित करने की आवश्यकता को भी समाप्त करता है। '$' वाइल्ड कार्ड के साथ एक शुरुआत है और '>' कहता है केवल प्रत्यक्ष बच्चों का चयन करें। वास्तव में एक अच्छा सीएसएस चयनकर्ता संदर्भ के लिए http://www.w3schools.com/cssref/css_selectors.asp देखें।

2

एक और अधिक औपचारिक समाधान:

टैग:

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

शैली:

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

अपने <p:dataTable> इस

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

और आप यू की तरह कॉलम की चौड़ाई का उपयोग करता है से निम्नलिखित सीएसएस कॉलम हेडर को छिपाने के लिए

.myTable thead { 
    display:none; 
} 

आप भी स्तंभ चौड़ाई आप स्तंभ शीर्ष लेख को छिपाने के लिए सेट


समाधान खो देते हैं और स्तंभ रखेंगे चौड़ाई हैडर

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

छिपाएं (अन्य उत्तरों के समान):

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

... और निर्दिष्ट स्तंभ चौड़ाई:

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

ये पुनर्प्रवाहित = "true" तालिकाओं के साथ काम नहीं करेगा।

मेरे लिए सीमा: कोई भी नहीं, पृष्ठभूमि: कोई भी सुझाव तालिका के ऊपर एक खाली जगह छोड़ देता है और तालिका के बाएं किनारे की सीमा को भी छुपाता है।

0

अपने 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; 
    } 

तो इस तरह एक्सएचटीएमएल फ़ाइल से इस कोड को फोन:

<p:dataTable styleClass="borderless">