Discussion :

[medhan]

Bonsoir,

Je suis entrain de faire un tableau dynamique en php.

1: Les lignes sont dynamiques et présentent les activités.
2: Les colonnes sont aussi dynamique et présentent aussi les personnes.

Je suis entrain de chercher la méthode d'orienter les cellules ( c-a-d </td>) verticalement mais toute en gardant le width des cellules "</td>" fixe et égale à une valeur par exemple 20px et la hauteur fixe et égale à une valeur par exemple de 60px.

J'ai essayé avec le code dessous mais il me donne la largeur de la cellule = à sa hauteur.

Code :

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

1
2
3
4
.inclinne{
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
}

Code php :

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

1
2
3
4
5
<?php
while( $row_rh = mysql_fetch_array($req_rh) ){
	echo'<td class="inclinne">'.$row_rh['nom_complet'].'</td>'; 
}
?>

je vous présente l'image du tableau que je suis entrain de faire.

Je vous remercie pour votre aide

[CCyrillus]

copie de ma reponse d'un autre forum :



voici 3 approches : http://jsfiddle.net/qjzwG/319/ http://jsfiddle.net/qjzwG/320/ http://jsfiddle.net/qjzwG/321/ en réponse sur un topic similaire ici .

Le principe est de donner une hauteur légèrement supérieur à la largeur en se servant des padding verticaux, qui prennent la largeur comme référence de calcul.

Dans le cas d'une cellule étriquer , le principe est d’insérer un conteneur supplémentaire qui servira a donner la hauteur .

La largeur peut alors être contrôler avec width et table-layout:fixed sur la cellule ou une marge négative importante et opposée au sens de lecture (dir/direction) sur le conteneur suplementaire, le conteneur dépassera de la cellule avant de subir une rotation.

Pour info , j'ajoute cette démo aussi http://codepen.io/gc-nomade/pen/JuAio , qui repose sur display:table .

Pour les couleurs de fond, applique la couleur a <table> ou au premier <tr>, puis une couleur a partir du deuxième <tr> ou de ces cellules(th,td).

Ne cherches pas à donner un fond au première cellules qui sont mise en rotation , aux contenus , ce serait oki .

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
table tr {
    background:gray;
}
/* ou
table {
    background:gray;
}
*/
/* puis */
 
tr + tr {
    background:white;
}

éventuellement tu peut te servir de jsfiddle ou de codepen, pour y laisser ton code en cours , chacun pourra s'en servir et te proposer des corrections ou solutions
voir resultat possible ici : http://codepen.io/gc-nomade/pen/Cqkig/