Discussion :

[Poulpynette]

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.

[GihefBey]

Bonjour,

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

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

-

[Poulpynette]

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.

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 :

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
<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 :

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

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).

[Général03]

Même si tu rajoutes cela ça ne fonctionne pas ???

Code :

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

1
2
3
.pdtAuto {
width:10%;
}

[Poulpynette]

Non, ni en pixels, ni en pourcentage ...

[Général03]

Alors je ne comprend pas le problème que tu as ?

[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.

[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.

[Poulpynette]

???

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

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 ...

[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...

[Poulpynette]

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

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 !

[12monkeys]

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

Code :

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

<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...

[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