[HTML 4.0] Fixer une largeur de colonne dans une table très large

Version imprimable

06/03/2009, 15h24
Poulpynette

[HTML 4.0] Fixer une largeur de colonne dans une table très large

Bonjour,

J'ai cherché (forums, tutoriaux) mais n'ai pas trouvé de problème équivalent ni de réponse à mon problème. J'espère ne pas faire doublon, si c'est le cas désolée ^^

Voilà mon souci, j'ai un tableau de résultats avec une nombre de colonnes important (je sais c'est moche). Du coup ma table dépasse allègrement en largeur la taille de la fenêtre du navigateur.

J'ai laissé libre la taille de la table et des colonnes, ainsi le navigateur ratatine tout en largeur comme il peut.

Ce que je souhaiterais, c'est pouvoir fixer la taille (en pixels) de certaines colonnes (en CSS de préférence), pour des raisons esthétiques, de manière à les agrandir un peu.

Est-ce possible ?
Dois-je pour cela fixer tous les éléments en pixels ? (table, cellules)

Merci d'avance pour vos solutions.
06/03/2009, 20h27
GihefBey

Bonjour,

Un problème similaire est soulevé dans ce post.

Donne-nous le code HTML et CSS de ta page.

-

Citation:

Envoyé par GihefBey

Un problème similaire est soulevé dans ce post.

Je viens de lire ce post, mais ça ne m'aide pas du tout puisque je n'ai pas le même problème.

Citation:

Envoyé par GihefBey

Donne-nous le code HTML et CSS de ta page.

Je doute qu'il aide beaucoup. Une simple table avec de nombreuses colonnes (de manière à dépasser exagérément la largeur de la fenêtre du navigateur).

Je peux quand même vous donner le début, mais tout coller est inutile.

JSP :

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
<table class="tableResultats">
<%-- Entête de la table de résultats : PDT --%>
<tr>
<td class="pdt"><bean:message key="machinchose.col1" /></td>
<td class="pdtAuto"><bean:message key="machinchose.col2" /></td>
<td class="pdtAuto"><bean:message key="machinchose.col3" /></td>
<td class="pdt"><bean:message key="machinchose.col4" /></td>
<td class="pdt"><bean:message key="machinchose.col5" /></td>
<td class="pdt"><bean:message key="machinchose.col6" /></td>
<td class="pdt"><bean:message key="machinchose.col7" /></td>
<td class="pdt"><bean:message key="machinchose.col8" /></td>
<td class="pdt"><bean:message key="machinchose.col9" /></td>
<td class="pdt"><bean:message key="machinchose.col10" /></td>
<td class="pdt"><bean:message key="machinchose.col11" /></td>
<td class="pdt"><bean:message key="machinchose.col12" /></td>
<td class="pdt"><bean:message key="machinchose.col13" /></td>
<td class="pdt"><bean:message key="machinchose.col14" /></td>
<td class="pdt"><bean:message key="machinchose.col15" /></td>
<td class="pdt"><bean:message key="machinchose.col16" /></td>
<td class="pdtAuto"><bean:message key="machinchose.col17" /></td>
<td class="pdt"><bean:message key="machinchose.col18" /></td>
<td class="pdt"><bean:message key="machinchose.col19" /></td>
<td class="pdt"><bean:message key="machinchose.col20" /></td>
<td class="pdt"><bean:message key="machinchose.col21" /></td>
<td class="pdt"><bean:message key="machinchose.col22" /></td>
<td class="pdt"><bean:message key="machinchose.col23" /></td>
<td class="pdt"><bean:message key="machinchose.col24" /></td>
</tr> [...]

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.tableResultats {
	border: 1px solid #cbd300;
	border-spacing: 0;
	border-collapse: collapse;
}
 
.pdt, .pdtAuto {
	background-color: #cbd300;
	color: white;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 4px;
	white-space: nowrap;
}

NB : pdt et pdtAuto ont les mêmes propriétés pour le moment.
C'est pour les colonnes ayant la classe "pdtAuto" que je souhaite fixer la largeur (agrandir).

09/03/2009, 13h52
Général03
Même si tu rajoutes cela ça ne fonctionne pas ???
Code:

1 2 3 .pdtAuto { width:10%; }
09/03/2009, 14h14
Poulpynette

Non, ni en pixels, ni en pourcentage ...
09/03/2009, 14h22
Général03

Alors je ne comprend pas le problème que tu as ? :?
09/03/2009, 14h28
Poulpynette

Je souhaite agrandir certaines colonnes, en fixant leur taille, mais n'y parviens pas.

Je rappelle que la table est très large, donc le navigateur ratatine tout en largeur dans la table, et ne tient plus compte des largeurs imposées.
09/03/2009, 14h39
Général03

Mais ai tu sûr qu'après avoir réduit tes colonnes tu pourras toutes les afficher sur la largeur de ta page ? Y a t-il un intérêt d'afficher des colonnes toutes petites si tu ne vois pas se qu'il y a dedans??
Sinon tu coupes ton tableau en plusieurs pour les afficher les uns en dessous des autres.
09/03/2009, 15h18
Poulpynette

???

Est-ce que je me suis si mal exprimée que ça ? :mouarf:

Non, tu n'as pas compris. Relis mon premier post je pense ^^

Mes colonnes sont nombreuses => dès le départ, ça ne rentre pas en largeur dans la fenêtre du navigateur, et une scrollbar apparaît en bas.

Dans ce cas de figure, quoi que l'on spécifie dans le CSS, pour une table, le navigateur compresse au max les colonnes (en largeur).

Or pour certaines colonnes, je souhaite fixer / forcer leur largeur (pour les ELARGIR) ^^

Sinon, je sais que c'est moche ainsi, mais c'est pour le boulot et c'est voulu comme ça. Donc je ne coupe pas en 2 tableaux ou autres ... :?
09/03/2009, 20h46
12monkeys

Bonsoir

Peut tu fixer une largeur à ton tableau ? Si oui fixe en une supérieure à la largeur maximale actuelle du tableau et tu verra qu'ensuite la largeur des colonnes s'élargira...
10/03/2009, 09h45
Poulpynette

C'est une idée oui, c'était la seule idée que j'avais et je voulais l'éviter en fait :mrgreen:

Le truc, c'est que face au nombre important de colonnes, dont j'ai laissé la largeur libre, ça m'est difficile et ça m'ennuie de devoir tout fixer (parce qu'au final, j'en arriverai à tout fixer si je n'ai pas d'autre solution).

Grou !
10/03/2009, 18h08
12monkeys

Tu n'est pas nécessairement obligé de fixer la largeur de chaque colonne, fixe la largeur globale du tableau :

Code:

<table border="1" style="width:3500px">

Ensuite tu peut adapter la taille des colonnes que tu veux, les autres s'adapteront automatiquement et de manière égale au reste de la taille disponible...
11/03/2009, 11h02
Poulpynette

Bon, n'ayant pas trouvé d'autre solution, j'ai fini par suivre tes conseils 12monkeys.
J'ai donc fixé la largeur globale du tableau : suffisamment grande pour que mes largeurs fixes appliquées à certaines colonnes soient prises en compte.

Ça fonctionne.

Cela ne correspond pas tout à fait à la solution que j'espérais, puisque le reste des colonnes se partage une largeur "fixe". Mais ça me convient si je ne trouve pas mieux.

Merci ;)