Tableau avec écriture verticale

**moimp** · 10/05/2017, 20h03

Bonjour,

J'ai le tableau suivant:

Code html :

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
<table class="users">
	<caption>Tableau des droits utilisateurs</caption>
	<thead>
		<tr>
			<th rowspan="2" colspan="4"></th>
			<th colspan="19">Droits d'accès</th>
			<th rowspan="2" colspan="2" class="thGrpAction">Actions</th>
		</tr>
		<tr>
			<th colspan="2" class="thGrpOnglets">sur les réglages</th>
			<th colspan="12" class="thGrpOnglets">sur le fichier</th>
			<th colspan="5" class="thGrpOnglets">sur export et impressions</th>
		</tr>
		<tr><th>Code d'accès</th><th>Autorisation</th><th>Banni</th><th>Mise à jour</th><th>Autoris. masquage</th><th>Impressions</th><th>Création personnel</th><th>Modif. personnel</th><th>Suppression personnel</th><th>Création activités</th><th>Modif. activités</th><th>Suppression activités</th><th>Création compétences</th><th>Modif. compétences</th><th>Suppression compétences</th><th>Création groupes</th><th>Edition groupes</th><th>Suppression groupes</th><th>Messagerie</th><th>Etiquettes std</th><th>Badges</th><th>Export VCF</th><th>Export CSV</th><th>Edition ligne</th><th>Suppression ligne</th></tr>
	</thead>
	<tbody>
	</tbody>
</table>

J'ai deux problèmes:
1-Je n'arrive pas à régler au minimum la largeur des cellules verticales,
2-Le fond des cellules verticales est irrégulier. Il n'occupe pas partout toute la hauteur mais si je me mets en déboggage (F12) les cellules occupent alors leur hauteur. Voir image.

Nom : Capture.PNG
Affichages : 530
Taille : 16,9 Ko

Nom : Capture.PNG
Affichages : 530
Taille : 16,9 Ko

Voici le CSS:

Code css :

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
20
21
22
23
24
25
26
27
28
29
30
31
.users
{
	text-align:center;
	font-size:10px;
}
.users caption
{
	padding:10px;
	font-size:14pt;
}
.users thead tr:nth-child(3) {
	height:105px;
}
.users thead tr:nth-child(3) th {
	background-color:transparent;
	padding:0;
	margin:0;
	height:105px;
	width:0;
	height:0;
	/* Safari */
	-webkit-transform: rotate(-90deg);
	/* Firefox */
	-moz-transform: rotate(-90deg);
	/* IE */
	-ms-transform: rotate(-90deg);
	/* Opera */
	-o-transform: rotate(-90deg);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

EDIT: Si je mets un fond opaque, j'obtiens un gros rectangle horizontal qui déborde sur les cellules voisines.

**NoSmoking** · 11/05/2017, 14h45

Bonjour,
il semble que tu te compliques la vie inutilement.

Je partirais sur la base d'une structure de ligne à tourner de 90° suivante

Code html :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<tr class="rot-90">
  <th>
    <span>Code d'accès</span>
  </th>
  <th>
    <span>Autorisation</span>
  </th>
  <th>
    <span>Banni</span>
  </th>
  <th>
    <span>Mise à jour</span>
  </th>
  <th>
    <span>Autoris. masquage</span>
  </th>
  <th>
    <span>Impressions</span>
  </th>
  <th>
    <span>Création personnel </span>
    </th>
    <th>
      <span>Modif. personnel</span>
    </th>
    <th>
      <span>Suppression personnel</span>
    </th>
    <th>
      <span>Création activités</span>
    </th>
    <th>
      <span>Modif. activités</span>
    </th>
    <th>
      <span>Suppression activités</span>
    </th>
    <th>
      <span>Création compétences</span>
    </th>
    <th>
      <span>Modif. compétences</span>
    </th>
    <th>
      <span>Suppression compétences</span>
    </th>
    <th>
      <span>Création groupes</span>
    </th>
    <th>
      <span>Edition groupes</span>
    </th>
    <th>
      <span>Suppression groupes</span>
    </th>
    <th>
      <span>Messagerie</span>
    </th>
    <th>
      <span>Etiquettes std</span>
    </th>
    <th>
      <span>Badges</span>
    </th>
    <th>
      <span>Export VCF</span>
    </th>
    <th>
      <span>Export CSV</span>
    </th>
    <th>
      <span>Edition ligne</span>
    </th>
    <th>
      <span>Suppression ligne</span>
    </th>
  </tr>

on notera l'insertion d'élément <span> pour appliquer le CSS suivant

Code css :

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

1
2
3
4
5
6
7
.rot-90 span {
  font-weight: normal;
  min-height: 13em;         /* par exemple */
  -ms-writing-mode: tb-rl;  /* pour IE hors Edge */
      writing-mode: vertical-rl;
  transform: translate(0%, 0%) rotate(-180deg);    
}

et en mettant une couleur de fond à tes <th> tu ne devrais plus avoir le problème.

Code css :

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

1
2
3
th {
    background: #cde;
}

**moimp** · 12/05/2017, 16h38

Non, ça ne fonctionne pas du tout.

**NoSmoking** · 13/05/2017, 11h28

Non, ça ne fonctionne pas du tout, ...

Je dirais plutôt que tu n'as pas su l'intégrer

Hormis le fait que les deux techniques misent en oeuvre permettent d'aboutir au même résultat, ton soucis relève plus de l'application des background-color sur les bons éléments.

Voici un exemple, il n'y a qu'à copier/coller et tester

Code html :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<title>[CSS]  TABLE Header rotate 90°</title>
<meta name="Author" content="NoSmoking">
<style>
body {
  font: 1em/1.25 Verdana;
}
.users {
  margin: auto;
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  font-size: 0.7em;
  font-weight: normal;
  background: #CDE;
}
.users caption {
  font-size: 2em;
}
.users th,
.users td {
  width: 4em;
  border: 1px solid #ABC;
  font-weight: normal;
  line-height: 2em;
}
.users tr:nth-child(2) {
  background: #EEE;
}
.users tbody tr {
  height: 3em;
  min-height: 3em;
}
.users tbody tr:nth-child(even) {
  background: #EEE;
}
.users tbody tr:nth-child(odd) {
  background: #FFF;
}
.rot-90 span {
  min-height: 14em;
  font-weight: normal;
  transform: rotate(-180deg);
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
</style>
<body>
<table class="users">
  <caption>Tableau des droits utilisateurs</caption>
  <thead>
    <tr>
      <th rowspan="2" colspan="4"></th>
      <th colspan="19">Droits d'accès</th>
      <th rowspan="2" colspan="2">Actions</th>
    </tr>
    <tr>
      <th colspan="2">Réglages</th>
      <th colspan="12">Fichiers</th>
      <th colspan="5">Export et Impressions</th>
    </tr>
    <tr class="rot-90"><th><span>Code d'accès</span></th><th><span>Autorisation</span></th><th><span>Banni</span></th><th><span>Mise à jour</span></th><th><span>Autoris. masquage</span></th><th><span>Impressions</span></th><th><span>Création<br>personnel</span></th><th><span>Modif. personnel</span></th><th><span>Suppression personnel</span></th><th><span>Création activités</span></th><th><span>Modif. activités</span></th><th><span>Suppression activités</span></th><th><span>Création compétences</span></th><th><span>Modif. compétences</span></th><th><span>Suppression compétences</span></th><th><span>Création groupes</span></th><th><span>Edition groupes</span></th><th><span>Suppression groupes</span></th><th><span>Messagerie</span></th><th><span>Etiquettes std</span></th><th><span>Badges</span></th><th><span>Export VCF</span></th><th><span>Export CSV</span></th><th><span>Edition ligne</span></th><th><span>Suppression ligne</span></th></tr>
  </thead>
  <tbody>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>
</body>
</html>

Pour info fonctionnait sur IE8.

**moimp** · 18/05/2017, 11h55

Effectivement! Merci!

Tableau avec écriture verticale

Tableau en CSS

Discussions similaires

Partager

Partager