28173 sujets

CSS et mise en forme, CSS3

Avec colspan, mes cellules non-colspannées sont trop larges

Bonjour !

voici la page qui resume mon probleme :
http://selector.free.fr/dev/test.html

voici le code qui me pose probleme :

<table border=1>
  <tr>
    <td>label1</td>
    <td colspan=2>texte loooooooooooooooooooooong</td>
  </tr>
  <tr>
    <td>label2</td>
    <td>111111</td>
    <td>222222</td>
  </tr>
</table>


le probleme est le suivant :
avec "texte loooooong" dans le td "colspanné", la largeur des 2 cellules 111111 et 222222 non "colspannées" s'adapte automatiquement.

Or je voudrais imposer que la cellule 111111 conserve juste la largeur du texte "111111", afin que ce soit seulement la cellule 222222 qui s'etende en largeur, mais je n'y parviens pas ...

j'ai essayé sans succes de jouer avec :
- style="table-layout:fixed" sur le <table>
- style="max-width:auto" sur le <td> qui contient 111111

ca doit quand meme etre possible d'avoir la meme largeur de cellule 111111 ds le cas A) et dans le cas B), mais je n'ai plus d'idées ...

Merci bcp d'avance pour vos explications ..

Anthony
Modifié par selector (17 Oct 2007 - 12:09)
Bonjour,

J'ai réussi à faire ce que tu souhaites réaliser (si j'ai bien compris) avec le code suivant:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 <title>Test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <style>
  table {
	width: 100%;
  }
  td {border: solid 1px red;}
 </style>
</head>
<body>
<table border=1>
  <tr>
    <td>label1</td>
    <td colspan="2">texte loooooooooooooooooooooong</td>
  </tr>
  <tr>
    <td style="width: 15%;">label2</td>
    <td>111111</td>
    <td style="width: 85%;">222222</td>
  </tr>
</table>
</body>
</html>

Ça passe bien avec Firefox 2 et Opera 9, à peu près correctement avec Konqueror 3.5, et je n'ai pas testé avec IE 6 ou 7.
merci bcp pour ta reponse
en fait ta solution fonctionne, mais elle impose de fixer arbitrairement la largeur des colonnes non-colspannées

le probleme de cette solution, c'est que dans mon probleme reel (mon exemple etait simplifié), je ne connais pas a l'avance le contenu de la
cellule 111111

sans fixer arbitrairement sa largeur, je voudrais juste que la cellule s'adapte a son contenu, sans etre impactée par la largeur de la cellule colspannée qui est au dessus (celle qui contient texte loooooooong)

anthony
Salut,

pour être sûr que cela fonctionne quelle que soit la taille du texte de ta cellule 1 tu peux mettre :
...
<td style="width: 0%;">
...
<td style="width: 100%;">

A+
Heyoan a écrit :
Salut,

pour être sûr que cela fonctionne quelle que soit la taille du texte de ta cellule 1 tu peux mettre :
...
<td style="width: 0%;">
...
<td style="width: 100%;">

A+


merci !
alors la, ca fonctionne : la largeur de la cellule 111111 est juste adaptée a son contenu

mais maintenant a cause de la cellule 222222, tout le tableau est trop large !
cf. ex C) http://selector.free.fr/dev/test.html

je sais que je suis ch#ant !

anthony
selector a écrit :
je sais que je suis ch#ant !

Je crois surtout que tu viens de te casser le nez sur les limites du modèle de rendu des tableaux et de ses implémentations respectives par les navigateurs.

Deux remarques en passant tout de même:
- tu peux peut-être donner une largeur au tableau lui-même et ainsi obtenir un rendu à peu près satisfaisant?
- tu peux aussi travailler sur des pages de test en mode Standard et pas en mode Quirks, ça aide. Smiley smile

(Si les notions de la deuxième remarque ne te sont pas connues, google est ton ami.)
Florent V. a écrit :

- tu peux peut-être donner une largeur au tableau lui-même et ainsi obtenir un rendu à peu près satisfaisant?

oui je vais me debrouiller comme ca
Florent V. a écrit :

- tu peux aussi travailler sur des pages de test en mode Standard et pas en mode Quirks, ça aide. Smiley smile

(Si les notions de la deuxième remarque ne te sont pas connues, google est ton ami.)

OK alors je file voir mon pote Smiley cligne
selector a écrit :
je ne constate pas de différence entre les 2, sous FF et IE en tout cas ...

Dans le cas de la page de test dont tu donnes le code, j'avais déjà rétabli un Doctype qui va bien, sans constater de différences. Ma remarque portait juste sur le fait que travailler en mode Standard et jamais en mode Quirks (sauf très rares exceptions, et sous réserve que l'on sache ce que l'on fait) est une bonne pratique essentielle en conception web.
Florent V. a écrit :

... travailler en mode Standard et jamais en mode Quirks (sauf très rares exceptions, et sous réserve que l'on sache ce que l'on fait) est une bonne pratique essentielle en conception web.

ca ne m'etonne pas, je vais tacher de m'en souvenir
mais le probleme c'est que ds le passé, a plusieurs reprises j'ai rencontré des problemes en mode standard, que je ne parviens a régler que en quirks

par exemple : dans mon intranet pour IE, j'utiliser un showModalDialog pour afficher une page qui submit vers une autre page : j'ai inclus dans le head une balise <base=_self>, afin que le submit ne provoque pas l'ouverture d'une nouvelle fenetre IE.
Et bien :
=> en Quirks, la balise <base> joue bien son role : pas d'ouverture d'une nouvelle fenetre lors du submit,
=> en standard, impossible de parvenir a submiter le modal dialog vers le meme modal dialog.
Sujet clos
Aller à