Discussion :

[Xeuch]

Bonjour,

j'ai utilisé http://icant.co.uk/csstablegallery/tables/97.php#r97 qui propose ddes design prêts pour des tableau.

Cependant je voudrais que la taille de mon tableau ne dépasse pas l'écran (soit fixe en largeur. j'ai beau modifié le CSS ( sachant aussi je ne m'y connais pas trop) mais j'ai toujours mon tableau qui s'agrandit en largeur si les cellule augmentent sachant que je n'ai que 12 à 13 cellule au maximum.

voici le code css :

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
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
table {
	border-collapse: collapse;
	font-family: "Trebuchet MS", "Lucida Sans Unicode", verdana, lucida, helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
}
caption {
	font-size: 1.4em;
	font-stretch: condensed;
	font-weight: bold;
	padding-bottom: 5px;
	text-align: left;
	text-transform: uppercase;
}
th, td {
	border-bottom: 1px solid #666;
	border-top: 1px solid #666;
	padding: 0.6em;
	vertical-align: 4px;
}
th {
	text-align: left;
	text-transform: uppercase;
}
thead th, tfoot th, tfoot td {
	background-color: #cc9;
	font-size: 1.1em;
}
tbody th {
	background: url(http://www.clacksweb.org.uk/images/bullet_vacancy.gif) no-repeat 6px 0.8em;
	padding-left: 24px;
}
tbody th, td {
	background-color:#eee;
}
tbody tr:hover td, tbody tr:hover th {
	background-color: #E5E5CB;
}
tr.odd td, tr.odd th {
	background-color: #ddd;
}
tbody a {
	color: #333;
}
tbody a:visited {
	color: #999999;
}
tbody a:hover {
	color: #33c;
}
tbody a:active {
	color: #33c;
}
tbody td+td+td+td a {
	background: url(http://www.clacksweb.org.uk/images/external.gif) no-repeat right 0.4em;
	padding-right: 12px;
}
tfoot th {
	text-align: right;
}
tfoot th:after {
	content: ":";
}

et voici mon tableau :

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 id="matable">
	<caption align="center" ><h1 id="laDate"><?php echo $annee;?><h1></caption>
	<tr>
	        <th>Champs</th>
		<th>Janvier</th>
		<th>Fevrier</th>
		<th>Mars</th>
		<th>Avril</th>
		<th>Mai</th>
		<th>Juin</th>
		<th>Juillet</th>
		<th>Aout</th>
		<th>Septembre</th>
		<th>Octobre</th>
		<th>Novembre</th>
		<th>Decembre</th>
	</tr>
</table>

Merci de votre aide

[Bisûnûrs]

L'essence même du tableau est de s'adapter en largeur et hauteur en fonction du contenu des cellules. Le tableau a aussi la particularité de ne pas dépasser 100% de l'espace disponible quand c'est possible, donc qu'il peut retailler dans la largeur des colonnes en augmentant la hauteur. Si ton tableau dépasse de la page, c'est que ça sera forcément sa largeur minimum parce qu'il est alors impossible pour lui de diminuer la largeur.

Pour en limiter la portée, tu peux mettre dans chaque cellule un div qui englobe ton contenu en lui mettant la largeur maximale que tu veux pour ce contenu. Mais ça créera des chevauchements ou des tronquages.