Bonjour,

Je rencontre un souci avec la largeur d'un tableau : je souhaite que celui-ci ne dépasse pas la largeur de la page, c'est-à-dire qu'il n'y ait pas de scrollbar horizontale sur ma page.
Le tableau est généré dynamiquement à partir d'une base de données, et parfois les données ne sont pas breakable, c'est-à-dire que le mot ne peut pas être séparé proprement (typiquement, je peux avoir 30 lettres qui se suivent sans espace).

Voici le code HTML généré :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
 
<body>
	...
	<table class="rubrique" cellspacing="0" cellpadding="2">
		<!-- des <tr> et des <td>, à raison de 11 <td></td> par <tr></tr> -->
	</table>
</body>
Et 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
body {
	font-family: Arial;
	font-size: 8pt;
	color: #000000;
	text-align: left;
	background-color: #FFFFFF;
	// Il y a une marge de 2% de chaque côté
	margin-left: 2%; 
	margin-top: 20px;
	margin-right: 2%;
	margin-bottom: 0px;
}
.rubrique {
	width: 100%; // mon tableau doit faire 100% - 4% (les marges latérales)
	border: 0;
	margin-top: 15px;
}
Pour vous donner une idée, le tableau déborde d'environ 15-20% sur la droite (au moins pour un cas testé).

J'ai essayé la propriété CSS word-wrap: word-breaker mais ça ne marche pas (et il me semble que ce n'est valable qu'avec IE, or je dois aussi être compatible FF).

Je suis preneur de toutes les infos que vous pourrez me donner.

Merci !

Alain