<p:dataTable value="#{gestionComptes.allComptes}" var="item"
             tableStyle="width:auto" >
    <p:column width="40">
        <f:facet name="header">
            <h:outputText value="Id"/>
        </f:facet>
        <h:outputText value="#{item.id}"/>
    </p:column>
    <p:column width="200">
        <f:facet name="header">
            <h:outputText value="Nom"/>
        </f:facet>
        <h:outputText value="#{item.nom}"/>
    </p:column>
    <p:column style="text-align:right;" width="60">
        <f:facet name="header">
            <h:outputText value="Solde"/>
        </f:facet>
        <h:outputText value="#{item.solde}">
            <f:convertNumber pattern="###,###,##0"/>
        </h:outputText>
    </p:column>
</p:dataTable>

Vous pouvez choisir entre une largeur calculée automatiquement par PrimeFaces ou bien des largeurs que vous imposez (les 2 options sont données ci-dessus).

Remarque : Quand on réduit la taille d’une table PrimeFaces, par exemple avec tableStyle="width:auto", l'en-tête de la table (qui peut contenir les boutons pour passer de page en page si on ajoute paginator="true" dans <p:dataTable>) occupe encore toute la largeur de la page.

Si c'est gênant, 2 solutions :

• Ajouter ces styles CSS (dans default.css qui est dans le répertoire resources/css des pages Web) :
  

  .ui-datatable {  display: table; }
  .ui-datatable table { table-layout: auto !important; }

• Mettre la table dans un panelGrid :
  

  <p:panelGrid  id="forautowidth" columns="1">
      --- DataTable ici  ---
  </p:panelGrid>

Le plus simple est de choisir la première solution avec CSS. Si ça ne marche pas, c'est à cause du cache CSS du navigateur qui continue d'utiliser l'ancien fichier default.css. Faites recharger la page sans utiliser le cache. Avec Chrome (et avec Firefox et Edge ?) tapez Ctrl-F5 dans la page. Remarque : sur certains portables (Dell par exemple), les touches de fonctions sont associées d'office à certaines fonctionnalité et il faut alors taper Ctrl-Fn-F5, où "Fn" est une touche spéciale pour enlever la fonctionnalité attribuée d'office à la touche F5.

Si vous voulez éviter la zone grise dans le "content", vous pouvez ajouter ceci dans cssLayout.css :

#content {
    position: relative;
    background-color: #ffffff;
    padding: 5px;
}

Si les lignes de séparation des cellules de la tables ne sont pas affichées et que ça ne vous convient pas, ajoutez aussi ceci dans default.css :

td {
  border-width: 1px !important;
}

Je pense que vous avez compris comment vous pouvez changer l'aspect de la page à votre convenance en utilisant CSS.