Bonjour,

Je souhaite mettre les entêtes de colonnes d’un tableau en écriture verticale pour gagner de la place en largeur sur mon tableau. (sauf l’entête de la première colonne)

Les données de chaque colonne utile n’ont que deux caractères. (sauf la première)

J’ai programmé la « chose » en HTML de manière à obtenir quasiment le résultat attendu.

Mais je ne trouve pas la solution pour que la ligne d’entête ait la bonne hauteur pour contenir le texte de chaque colonne sans empiéter sur les lignes utiles.

Existe-t-il une propriété qui permette d’ajuster la hauteur de la ligne dans le cas d’un texte vertical?

Si oui, après de nombreuses recherches sur les forums je n'ai pas trouvé la solution... 

Je joins ci-dessous le code PHP & HTML  

<div class='table_fonct'>
              <?php
              If ($nbtotal >0)
              {
                $cols='services, activités, informations, citations, suggestions, MAJ, collaborateurs, RH, pointages, projets, O_F, clients, SAV, offres,
                       formation, droit_0, droit_1, droit_2, droit_3, droit_4, droit_5, droit_6, droit_7, droit_8, droit_9,
                       droit_10, droit_11, droit_12, droit_13, droit_14, droit_15, droit_16, droit_17, droit_18, droit_19,
                       droit_20, droit_21, droit_22, droit_23, droit_24, droit_25';
                $titre="";
                $cols = explode(',', $cols);
                $data = '<table><caption>'.$titre .'</caption><thead><tr><th>Identifiant</th> ';
                foreach($cols as $v)
                {
                  $data.= '<th style="writing-mode: vertical-rl; text-orientation: mixed">'.$v.'</th>';
                  //$data.= '<th>'.$v.'</th>';
                }
                $data.= '</tr></thead><tbody>';                         
                echo $data;                                             // entête de colonnes
    
                $stmt= $bdd->prepare($sql2);
                $stmt->execute();
                while ($resultats = $stmt->fetch(PDO::FETCH_ASSOC))     // contenu du tableau
                {
                  echo '<tr>
                          <td>'.$resultats['user_username'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_services'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_activites'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_informations'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_citations'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_suggestion'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_MAJ'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_collaborateurs'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_RH'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_pointages'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_projets'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_O_F'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_clients'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_SAV'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_offres'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_formation'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_0'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_1'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_2'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_3'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_4'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_5'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_6'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_7'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_8'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_9'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_10'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_11'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_12'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_13'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_14'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_15'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_16'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_17'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_18'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_19'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_20'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_21'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_22'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_23'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_24'].'</td>
                          <td style="text-align: center">'.$resultats['user_droit_25'].'</td>
                         </tr>';
                }
                $stmt->closecursor();
                echo '</tbody></table>';
              }
              ?>
            </div>

et le Css associé:

/*-------------------------------------------------------------*/
/* permet l'affichage en liste des données issues de la table  */
/*-------------------------------------------------------------*/ 
 .table_fonct               
{
   width: auto;
   font-size: 1em;
   margin-bottom: 5px;
   max-height: 630px;          /* cette limite de hauteur dépend de la taille de l'écran */
   overflow-y: auto;
   max-width: 1550px;          
   overflow-x: auto;
}

.table_fonct em {
  font-size:1em;
  color: Yellow; 
  font-family: Arial, Verdana, Times New Roman,sans-serif;
  font-weight: normal;      
}

.table_fonct caption
{
    font-weight: normal;
    font-size:1.5em;
    margin-bottom: 5px; 
}

.table_fonct th
{
    font-size:1.1em;
    padding: 3px 3px 1px 3px;
    border:2px solid white;
}

.table_fonct td
{
    font-size:1em;
    text-align: justify;
    padding: 3px 3px 1px 3px;
    border-left: 2px solid white;
    border-right:2px solid white;
    border-top:1px dotted white;
    border-bottom:1px dotted white;
}

.table_fonct a {font-family: arial;font-size:1em;color: #FFFFFF;text-decoration: underline; }

.table_fonct a:hover {font-family: arial;font-size:1em;color: #7AF5F9;text-decoration: underline; }

Je vous remercie beaucoup pour votre aide à solutionner mon problème. 

Jean-Marc

Bonjour 

C'est vrai que je n'ai pas lu entierement tout le code mais pourquoi ne pas mettre dans le css text-align center au lieu de le mettre directement sur les div ici 

ensuite pour afficher un texte comme vous le souhaitez vous avez la propiete writting mode 

<p>Mon texte retourne</p>

<style>
p
{
	border:black solid 1px;
	writing-mode: vertical-rl;
}
<style/>

Si vous avez mis une propriete qui vaux pour un sensemble d'elements mais que vous souhaitez en echapper une, il y a not en css 

exemple

si vous avez fait 

td

{

background-color:blue;

}

// si vous souhaitiez echapper un td qui ne devrait pas avoir cette couleur de fond il aurait fallu ecrire

td:not(#untrucpourselectionletd)

{

background-color:blue;

}

-
Edité par zvheer 9 octobre 2021 à 18:49:27

Bonjour Zvheer,

Merci pour votre aide.

Concernant les "text-align center", j'ai eu la flemme de créer une nouvelle class avec le "td" centré et j'utilise la class initiale ailleurs de nombreuses fois.

Merci aussi pour le rappel concernant le not en css... j'avais oublié cette propriété.

Concernant mon problème initial de taille de la ligne d'entête, la propriété writting mode: vertical-rl est bien utilisée à la ligne14 de mon code en PHP& HTML. C'est bien elle qui permet d'avoir le texte en vertical. Mais malheureusement cette propriété ne semble pas gérer pas la taille de la cellule du tableau... le texte vertical déborde comme on peut le voir sur ma capture d'écran.

si je mets la propriété dans le css pouragir sur tous les th de la class, toute la ligne d'entête a bien le texte affiché en vertical, mais la hauteur de la ligne d'entête est corrélée à la taille de police en "em" affichée en horizontal (ce qui explique le débordement)

Comment lier la hauteur de ligne d'entête au fait que le texte est en mode vertical?

Y-a-t-il un moyen de fixer la hauteur de la ligne "th" dans le css? si oui alors je ferai une class spécifique pour ce tableau et comme cela le problème sera traité, puisque je connais le texte des cellules d'entête. (Mais ce n'est pas très joli!)

Jean-Marc

Rebonjour, normalement tableau ou pas il ne devrait pas y avoir de bordement

j'ai essayer avec un exemple et le tout fonctionne bien essayez le code chez vous

<table>

		<thead>
			<tr>
				<th>Identifiant</th>
				<th>Ligne 1</th>
				<th>Ligne 2 plus longue</th>
				<th>Ligne 3</th>
				<th>Ligne 4 encore plus longue</th>
				<th>ligne 5</th>
			</tr>
		</thead>

		<tbody>

			<tr>
				<td>A bouvier</td>
				<td>12</td>
				<td>12</td>
				<td>12</td>
				<td>12</td>
				<td>12</td>
			</tr>

		</tbody>

	</table>

table,td,th
{
	border: black solid 1px;
	border-collapse:collapse;
}

table th:not(table th:nth-child(1) )
{
	writing-mode: vertical-lr; 
}

Si sa ne fonctionne pas ca veux dire qu'une ligne dans votre css definit une longueur ou largeur max pour les th donc ca cree ce debordement et du coup justement il ne faudrait pas fixer de hauteur pour que la hauteur du truc s'adapte a la longueur du texte contenu.

-
Edité par zvheer 10 octobre 2021 à 10:37:42

Merci beaucoup zvheer   pour la suggestion d'erreur et depuis ça fonctionne bien. 

J'avais mis une hauteur de th dans la déclaration générale de th! d'où le problème.

Et merci aussi pour l'aide concernant le css.

J'en ai profité pour modifier mon css en créant une class spécifique table_fonct1

incluant de th et td spécifique.  avec  .table_fonct1 th:not(.table_fonct1 th:nth-child(1)) et  .table_fonct1 td:not(.table_fonct1 td:nth-child(1)) pour nettoyer mon code. 

Jean-Marc Evrard

Bonsoir, content que ca marche. et tu vois c'est sa l'intérêt d'avoir un code propre c'est vrai que parfois on a la flemme mais quand y a des bugs on aurait souhaité avoir écris proprement pour s'y retrouver