[CSS 3] Colonnes écrites verticalement

[Kalas22]

Bonjour à tous !

Apres une recherche sur ce forum, je n'ai pas trouver d'aide donc je vous pose la question : comment mettre le nom de mes colonnes a la verticale??

J'ai tatoné et voila ce que sa donne

[Meloooo]

Salut,
Je viens de tester :

Code :

1
2
3
4
5
6
7
8
9
10
11
 
<table>
<tr>
	<th id="rotate">test 1</th>
	<th>test 2</th>
</tr>
<tr>
	<td>contenu de test 1</td>
	<td>contenu de test 2</td>
</tr>
</table>

et le code CSS :

Code :

1
2
3
4
5
6
 
#rotate{
-moz-transform:rotate(90deg); //firefox
-webkit-transform:rotate(90deg); //Chrome, Safari
-o-transform:rotate(45deg); //Opera
}

Et j'ai bien mon texte qui s'affiche à la vertical.
Sur quel navigateur est tu ?

[Kalas22]

Sous chrome ! et sa passe pas..

Par contre sous FireFox sa passe nickel !

Merci pour l'aide

Par contre sa me donne un rendu un peu étrange..^^

[Meloooo]

Code :

1
2
3
4
5
6
7
 
#rotate{
-moz-transform:rotate(90deg); 
-o-transform:rotate(90deg); 
-ms-transform: rotate(-10deg);
-webkit-transform:rotate(90deg);
}

La ca devrait passer sous Chrome et Safari
Sinon pour le rendu "bizarre" montre nous ton code html

[Kalas22]

Code :

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
 
<?php 
$jours=array('Lundi 01','Mardi 02','Mercredi 03','Jeudi 04','Vendredi 05','Samedi 06','Dimanche 07','Lundi 08','Mardi 09','Mercredi 10','Jeudi 11','Vendredi 12','Samedi 13','Dimanche 14','Lundi 15','Mardi 16','Mercredi 17','Jeudi 18','Vendredi 19','Samedi 20','Dimanche 21','Lundi 22','Mardi 23','Mercredi 24','Jeudi 25','Vendredi 26','Samedi 27','Dimanche 28','Lundi 29','Mardi 30','Mercredi 31');
$Nb_col=count($jours);
$Nb_lign=20;
 
echo'<table id="tablesorter-demo" class="tablesorter" width="100%" border="1" cellspacing="1" cellpadding="1" >';
echo'<tr>';
echo'<th id="Mois">Avril 2011</th>';
for($i=1;$i<=$Nb_col;$i++){
	echo '<th id="rotate">';
	echo "$jours[$i]"; 
	echo'</th>';
}
echo'</tr>';
 
for($i=0;$i<$Nb_lign;$i++){
	echo'<tr>';
	for($j=0;$j<$Nb_col;$j++){
 
		echo'<td>';
		echo'<div align="center"> <br> </td>';
	}
	echo'</tr>';
}
echo'</table>';
?>

En fait je dois remplir les en-tête avec les jours du mois courant, n'ayant pas encore de BDD j'ai fait un petit test, mais sinon dans la variable $jours je suis censé stocker tous les jours du mois !

Je pense avoir fait n'importe quoi donc au pire te casse pas la tête à essayer de comprendre

[kOrt3x]

Envoyé par Kalas22

Code :

En fait je dois remplir les en-tête avec les jours du mois courant, n'ayant pas encore de BDD j'ai fait un petit test, mais sinon dans la variable $jours je suis censé stocker tous les jours du mois !

Je pense avoir fait n'importe quoi donc au pire te casse pas la tête à essayer de comprendre

Il est où ton code CSS ?

[Kalas22]

Ici

Code :

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
/* tables */
table.tablesorter {
	font-family:arial;
	background-color: #CDCDCD;
	margin:10px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: red;
	border: 1px solid #FFF;
	font-size: 8pt;
	padding: 4px;
}
table.tablesorter thead tr .header {
	background-image: url(bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}

[Bovino]

Envoyé par Kalas22

Par contre sa me donne un rendu un peu étrange..^^

Il n'y a rien d'étrange : tu demandes à faire pivoter un élément de 90° et c'est bien ce qui est affiché, ensuite, que la table ne soit pas prévue pour cette modification d'affichage, c'est un autre problème

[NoSmoking]

Bonjour,
des similitudes avec ce post !!
http://www.developpez.net/forums/d10...l-horizontale/
...à voir...

[CCyrillus]

Bonjour,

ce qu'il faut comprendre ou savoir avec rotate , c'est que l'element est visuellement déplacé mais occupe toujours le même espace dans le flux du document.

c'est général a la regle :transform: rotate() ou matrix() ou scale() ou autre, tout comme le positionement relatif qui permet de deplacé visuellement un element.

Pour les cellules de tableau le contenu reste dans le flux et la largeur de ce contenu ne devient pas la hauteur de la cellule .