Tableau trop large pour la page

**Alain Dionne** · 15/05/2009, 12h54

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

**Macmillenium** · 15/05/2009, 13h33

Bonjour,

Un commentaire dans ton code explique tout :

Code css :

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

1
2
 
width: 100%; // mon tableau doit faire 100% - 4% (les marges latérales)

Les 4% ce sont les marges latérales du body (margin-left:2% margin-right:2%).
Il faudrait déduire ces valeurs de la largeur du tableau, soit 96%.

**Alain Dionne** · 15/05/2009, 13h50

Euh non, le width:100% se rapporte à la largeur du contenant, c'est-à-dire le body qui garde ses marges latérales, autrement dit un div.rubrique ou un table.rubrique a pour largeur 100% de 96%, soit 96%.

D'ailleurs, mes div.rubrique à 100% apparaissent bien avec des marges extérieures de 2%, et mon table.rubrique aussi quand les données ne sont pas trop longues. Par contre, si je réduis la propriété width à 96%, j'ai une marge de 2% à gauche et une de 6% à droite, pour mes div. Sur mon tableau, quand les données vont bien, c'est pareil, mais quand les données sont longues, ça ne résoud rien.

**Poulpynette** · 15/05/2009, 14h08

Bonjour,

A ma connaissance, si le contenu de ton tableau est trop grand, le tableau s'étirera quelle que soit la largeur imposée.

Dans le cas de données variables provenant d'une base de données, tu ne pourras pas faire grand chose.

Si tu veux que tes chaînes de caractères soient coupées lorsqu'elles sont trop longues, tu peux toujours bidouiller avec une fonction. mais pour cela il faut utiliser un langage tel que Php par exemple.

**Alain Dionne** · 18/05/2009, 12h25

Envoyé par Poulpynette

Bonjour,
Si tu veux que tes chaînes de caractères soient coupées lorsqu'elles sont trop longues, tu peux toujours bidouiller avec une fonction. mais pour cela il faut utiliser un langage tel que Php par exemple.

C'est effectivement ce que j'ai fait : j'ai écrit une fonction PHP (la fonction wordwrap est un peu brutale à mon goût) pour insérer des <br /> dans les mots trop longs de manière intelligente (les mots que j'affiche contiennent des caractères tels que '#' ou '_' après lesquels on peut faire un retour à la ligne sans gêner la lisibilité).

Merci de vos conseils en tout cas.

Alain

**Macmillenium** · 15/05/2009, 14h11

Envoyé par Alain Dionne

Euh non, le width:100% se rapporte à la largeur du contenant, c'est-à-dire le body qui garde ses marges latérales, autrement dit un div.rubrique ou un table.rubrique a pour largeur 100% de 96%, soit 96%.

Ok, j'ai confondu avec la largeur du body.
Dans ce cas, essaye de fixer la largeur de tes <td> en %.

Tableau trop large pour la page

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager