Tableau trop large pour la page
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:
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:
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
