masquer primefaces table en-tête de colonne

J'ai un p:treeTable et l'arbre contenu dans une seule colonne. L'arbre est un composant partagé de sorte que certaines de mes pages nécessitent en-tête de colonne et de et certains ne le font pas. Dans les pages où le columnHeader est vide, elle crée une ligne vide pour l'en-tête de colonne, que je ne veux pas. Je ne veux pas le contenu d'une colonne, pas seulement dans l'en-tête quand il n'y a pas d'en-tête de colonne.

Comment puis-je résoudre ce problème? Tous les pointeurs/idées serait génial. Merci!

OriginalL'auteur santa029 | 2012-10-09

  1. 15

    Vous pouvez résoudre avec CSS personnalisé par le réglage de la thead attribut d'affichage à aucun:

    Exemple:

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

    si votre JSF est similaire à ceci:

    <h:form id="testForm">
    <p:dataTable id="first">
        ...
    <p:/dataTable>
</h:form>
    merci pour la réponse, le display:none a fonctionné pour moi, tordu peu pour obtenir la ligne souhaitée .cacher-en-tête de colonne de la table thead tr[role='ligne'] {display: none;}

    OriginalL'auteur Akos K

  2. 5

    Plus formelle de la solution:

    TAG:

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

    Style:

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

    OriginalL'auteur ClipEscola Ciaporte

  3. 5

    Si votre <p:dataTable> utilise des colonnes de largeurs comme ce

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

    et que vous utilisez le code CSS suivant pour masquer les en-têtes de colonne

    .myTable thead {
    display:none;
}

    vous perdrez également les largeurs de colonne vous définissez

    Solution pour masquer la colonne d'en-tête et de garder les largeurs de colonne

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

    OriginalL'auteur Mark

  4. 1

    Vous pouvez trouver vous avez besoin pour être plus précis avec votre sélecteur de style:

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

    Cela élimine également le besoin de faire référence à votre id du formulaire. Le " $ "est un commence avec une wild-card et la" > " dit sélectionnez uniquement les enfants. Voir http://www.w3schools.com/cssref/css_selectors.asp pour une très bonne Sélecteur CSS de référence.

    OriginalL'auteur Heather92065

  5. 1

    Masquer l'en-tête (même que les autres réponses):

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

    ... et spécifiez la largeur de la colonne:

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

    Ces ne fonctionnera pas avec une redistribution="true" tables de.

    Pour moi la frontière:aucun, à l'arrière-plan:aucune suggestion laisse un espace vide au-dessus de la table et se cache le côté gauche de la frontière de la table.

    OriginalL'auteur Gabor Nagy

  6. 0

    Ajouter ce code à votre css3 fichier 

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

    Ensuite appeler ce code à partir du fichier xhtml comme ceci :

    <p:dataTable styleClass="borderless">

    OriginalL'auteur Omar