Discussion :

[ahmedpa]

Bonjour,

Je suis entrain de développer un portail web et je voudrais savoir s'il vous plait en utilisant le composant DataTable du primefaces , est-ce-qu'il y a un attribut permettant de changer la couleur des bordures du dataTable qui sont en noir vers une autre couleur.

Merci

[Mishulyna]

Bonjour,

trouvé sur le net :

Give the table in question a specific style class:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p:dataTable ... styleClass="borderless">

So that you can use more specific CSS selectors for this:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.ui-datatable.borderless .ui-datatable-data tr,
.ui-datatable.borderless .ui-datatable-data-empty tr,
.ui-datatable.borderless .ui-datatable-data td,
.ui-datatable.borderless .ui-datatable-data-empty td {
    border-style: none;

}

Tu devras peut-être définir deux classes de style: "adminTableBorder" et "userTableBorder".

[ahmedpa]

Oui merci bien ça marche mais je voudrais aussi que la couleur header du DataTable change aussi c'est possible?

[ahmedpa]

par exemple j'ai ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 <p:dataTable styleClass="DataTable"  var="GridPanel"  rows="5" width="50%">
               <p:column>
 
 
 
                    </p:column>
 
 
 
       </p:dataTable>

avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<style type="text/css"  >
 
  .DataTable table * {
       border: none !important;
   }
</style>

Lorsque j'exécute il y a une ligne en gris qui correspond normalement à la column c'est possible de changer sa couleur vers le blanc pour qu'elle n’apparaisse plus?

Merci

[Mishulyna]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
th {
         border: none !important;
    }

Cette fois-ci j'ai testé, ça fonctionne.

[ahmedpa]

j'ai ajouté toujours la ligne aparaisse

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 .DataTable table * {
       border: none !important;
   }
 
   th {
         border: none !important;
    }
 
 
  <p:dataTable styleClass="DataTable"  var="GridPanel"  rows="5" width="50%">
               <p:column>
 
 
 
                    </p:column>
 
 
 
       </p:dataTable>